Question

我必须成对显示具有不同内容大小的并排排序的已排序商品（使用某个模型值使用成角度的ng-repeat生成li）。我使用了引导网格列来管理li内容的定位。问题是li的编号与上一列的内容非常接近。因为在我的情况下，第二李订单号“ 2”与第一李的内容有关。在检查时，我发现索引号不在“ col-sm-6”之外。更改列的padding-left可以解决此问题，但是我正在寻找一种更好的引导方式。

 /* highlight column border */
        .col-sm-6 {
            border: solid 1px red;
        }

        /* a fix for column displacement */
        .col-sm-6:nth-child(odd) {
            clear: left;
        }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
        <ol class="row">
            <li class="list-group-item2 col-sm-6">
                Lorem Ipsum is simply dummy text of the printing and typesetting industr Lorem is text of the printing and typesetting industr
                Lorem Ipsum is simply dummy text of the printing and typesetting industr Lorem Ipsum is simply dummy text
                of the printing and typesetting industry.
            </li>
            <li class="list-group-item2 col-sm-6">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </li>

            <li class="list-group-item2 col-sm-6 label-warning">
                Lorem Ipsum is simply dummy text of the printing and typesetting industr Lorem Ipsum is simply dummy text of the printing
                and typesetting industr Lorem Ipsum is simply dummy text of the printing and typesetting industr Lorem Ipsum
                is simply dummy text of the printing and typesetting industr Lorem Ipsum is simply dummy text of the printing
                and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of
                the printing and typesetting industry.
            </li>
            <li class="list-group-item2 col-sm-6">
                Lorem Ipsum is simply dummy text
            </li>
            <li class="list-group-item2 col-sm-6">
                Lorem Ipsum is simply dummy text
            </li>
            <li class="list-group-item2 col-sm-6">
                Lorem Ipsum is simply dummy text
            </li>
        </ol>
    </div>

Answer 1

最好的方法是使用列表样式位置

ul {
   list-style-position: inside;
}

成对的订购清单

1 个答案: