Website-Inhalt

Question

Ich habe viele Möglichkeiten zum Code versucht, aber keiner von ihnen funktioniert. Die 3 Produkte sind vertikal in einer Spalte aufgelistet. Aber ich habe keine Ahnung, wie man die folgenden <div>, die 6 andere Produkte enthalten, in verschiedene Spalten daneben trennt. Kannst du mir helfen, das zu lösen?

Oder auf andere Weise, kann die <div> tatsächlich in 3 Produkte pro Zeile, nicht in der Spalte ausgerichtet?

<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>