Bootstrap两列列表

时间:2014-04-11 12:28:09

标签: jquery html css twitter-bootstrap

我的产品页面上有一个列表。
现在我的列表是一列宽,所有产品都在彼此之下。

关键是我希望产品有两列宽。 我正在使用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>&euro;29,99</strike></small> &euro;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>

1 个答案:

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