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

考虑使用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>上是否有效？

谢谢！

解决方法

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

选项1

使用一点HTML和CSS,您可以在每个li上设置值([Valid HTML5])：

[JS Fiddle Example]

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 Example]

HTML

<ol>
    <li class="col-xs-6">Row 1,col 2</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: "";
}

但是,请记住[browser compatibility].

原文地址：https://www.jb51.cc/css/242317.html