我的页面上有一个产品列表。
现在我的列表是一列宽,所有产品都位于彼此之下。
重点是我想要两列宽的产品。 我正在使用 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>
最佳答案
这取决于您使用的 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
。
关于jquery - Bootstrap 两列列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23012571/