網站內容

Question

我已經嘗試了很多方法來編碼，但沒有一個可以工作。這三種產品在一列中垂直列出。但我不知道如何將包含6個其他產品的以下<div>分隔到旁邊的不同列中。你能幫我解決這個問題嗎？

或者，在其他方面，<div>實際上是否每列對齊3個產品，而不是列？

<div class="products-right-grids-position1"> 
<h4>BUN BOY Bakery</h4> 
<p>Best Bakery in Town </p> 
<p>&nbsp;</p> 
</div> 
</div> 
</div> 
<div class="products-right-grids-bottom"> 
<div class="col-md-4 products-right-grids-bottom-grid"> 

<?php 
echo getPros(); 
?> 

<?php 
echo getBreadPros(); 
?> 

</div> 
<div class="clearfix"> </div> 
</div> 

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <a href="#">About</a> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px"> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <a href="#myModal1" data-toggle="modal">SHARE</a> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <a href="#">About</a> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px"> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <a href="#myModal1" data-toggle="modal">SHARE</a> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <a href="#">About</a> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px"> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <a href="#myModal1" data-toggle="modal">SHARE</a> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <a href="#">About</a> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px"> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <a href="#myModal1" data-toggle="modal">SHARE</a> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <a href="#">About</a> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px"> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
 
      <a href="#myModal1" data-toggle="modal">SHARE</a> 
 
     </div> 
 
    </div> 
 
</div>