jquery - Bootstrap 两列列表

Question

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

重点是我想要两列宽的产品。我正在使用 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>

Answer 1

这取决于您使用的 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。