我尝试了许多编码方法,但没有一种方法可行。这3种产品在一列中垂直列出。但我不知道如何将包含6个其他产品的以下<div>
分隔到不同的列中。你能帮我解决这个问题吗?
或者,在其他方面,<div>
实际上是否可以与每行3个产品对齐,而不是在列中?
<div class="products-right-grids-position1">
<h4>BUN BOY Bakery</h4>
<p>Best Bakery in Town </p>
<p> </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>
答案 0 :(得分:-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>
&#13;