如何在列表项中使用Bootstrap列？

Question

考虑使用Boostrap 3的以下标记:

<ol>
    <li>
        <div class="row">
            <div class="col-xs-6">
                Row 1, col 1
            </div>
            <div class="col-xs-6">
                Row 1, col 2
            </div>
        </div>
    </li>
</ol>

为什么文本与"1"不一致 来自<ol>？以http://jsfiddle.net/R2tXU/为例......

另外,将class="row"权利放在<li>？上是否有效？

谢谢!

Answer 1

对不起,我在这里回复的时间有点迟了......但是,使用有效的标记很重要,因此我认为值得一提的是替代解决方案......

选项1

使用一点点HTML和CSS,您可以设置value每个li([ Valid HTML5 ]):

[ JS小提琴示例 ]

HTML

<ol>
    <li class="col-xs-6" value="1">Row 1, col 1</li>
    <li class="col-xs-6">Row 1, col 2</li>
    <li class="col-xs-6" value="2">Row 2, col 1</li>
    <li class="col-xs-6">Row 2, col 2</li>
</ol>

CSS

ol li:nth-child(2n+0) {
    list-style: none;
}

选项2

但是,如果你想采用纯粹的CSS方法,这可能是最好的选择......

[ JSFiddle示例 ]

HTML

<ol>
    <li class="col-xs-6">Row 1, col 1</li>
    <li class="col-xs-6">Row 1, col 2</li>
    <li class="col-xs-6">Row 2, col 1</li>
    <li class="col-xs-6">Row 2, col 2</li>
</ol>

CSS

ol {
    counter-reset: index;
}

ol li:nth-child(2n+0) {
    counter-increment: index;
    list-style: none;
}

ol li:nth-child(2n+0):before {
    content: counter(index) ".";
}

ol li:nth-child(2n+0):before {
    content: "";
}

但是,请记住[ 浏览器兼容性 ].