Содержимое веб-сайта

Question

Я пробовал много способов кода, но ни один из них не работает. 3 продукта перечислены вертикально в одном столбце. Но я понятия не имею, как отделить следующие <div>, содержащие 6 других продуктов, в разных столбцах рядом с ним. Можете ли вы помочь мне решить эту проблему?

Или, другими словами, может ли <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>