ウェブサイトのコンテンツ

Question

私は多くの方法でコードを作成しましたが、どれもうまくいきません。 3つの製品が縦に1列に記載されています。しかし、それ以外の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>