我的产品页面上有一个列表。
现在我的列表是一列宽,所有产品都在彼此之下。
关键是我希望产品有两列宽。 我正在使用bootstrap。
<ul class="list-group product-select product-item">
# This is one item
<li class="list-group-item product-item">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="product_images/image.gif" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading product-item-heading">
<small><strike>€29,99</strike></small> €24,99
<span class="label label-default product-item-stock text-right">
+100 stock
</span>
</h4>
<h2 class="product-item-title">
Product title
</h2>
</div>
</div>
</li>
# Ending item one
</ul>
答案 0 :(得分:5)
这取决于您使用的Bootstrap版本。
在Bootstrap-3或以上:
<div class="container">
<div class="row">
<div class="col-lg-6"> ---1st Column--- </div>
<div class="col-lg-6"> ---2nd Column--- </div>
</div>
<div class="row"> <!--In case of multiple rows of two column-->
<div class="col-lg-6"> ---1st Column--- </div>
<div class="col-lg-6"> ---2nd Column--- </div>
</div>
.....
</div>
旧版本:
<div class="container">
<div class="row">
<div class="span6"> ---1st Column--- </div>
<div class="span6"> ---2nd Column--- </div>
</div>
<div class="row"> <!--In case of multiple rows of two column-->
<div class="span6"> ---1st Column--- </div>
<div class="span6"> ---2nd Column--- </div>
</div>
.....
</div>
请记住,如果您要创建许多产品行并想要连续创建2个产品,那么您必须添加一些逻辑来开始和结束特定的div
。