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 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 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: "";
}

但是，请记住[browser compatibility]。

Answer 2

这就是我修复它的方法。没有其他额外的样式，只有Bootstrap类。

您只需将这些课程添加到row div d-inline-flex w-100

即可

 <ol>
    <li>
        <div class="row d-inline-flex w-100 ml-2">
            <div class="col-xs-6">
                Row 1, col 1
            </div>
            <div class="col-xs-6">
                Row 1, col 2
            </div>
        </div>
    </li>
    <li>
        <div class="row d-inline-flex w-100 ml-2">
            <div class="col-xs-6">
                Row 2, col 1
            </div>
            <div class="col-xs-6">
                Row 2, col 2
            </div>
        </div>
    </li>
</ol>

Fiddle here

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

2 个答案:

选项1

选项2