twitter-bootstrap Bootstrap 两列列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23012571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap two columns list
提问by Thom
I have a list on my page with products.
Now is my list one column wide and all the products are under each other.
我的页面上有一个包含产品的列表。
现在是我的列表一栏宽，所有产品都在彼此之下。
The point is that I want to have two columns wide with products. Im using 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>
回答by Sujit
It depends on which version of Bootstrap you using.
这取决于您使用的 Bootstrap 版本。
In Bootstrap-3 or above :
在 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>
In Older Versions:
在旧版本中：
<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>
Remember if you are creating many product rows and want to create 2 products in a row then you have to add some logic to start and end the particular div.
请记住，如果您正在创建许多产品行并希望连续创建 2 个产品，那么您必须添加一些逻辑来开始和结束特定的div.
