网站内容

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>