成对项目的有序列表

Question

我必须以不同的内容大小成对地显示有序列出的项(使用angular ng-repeat从某个模型值生成li)。我使用bootstrap网格列来管理li内容定位。问题是li的编号与上一篇专栏的内容非常接近。在我的例子中，第二个li序号"2“触及了第一个li的内容。在检查时，我发现索引号在“of sm-6”之外。更改列的左侧填充将修复此问题，但我正在寻找引导方式的更好解决方案。

​

 /* 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;
}