CSS 如何在列表项中使用 Bootstrap 列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21961623/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use Bootstrap columns inside a list item?
提问by redtree
Consider the following markup with Boostrap 3:
考虑以下 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>
Why does the text not align with the "1." from the <ol>? See http://jsfiddle.net/R2tXU/as an example...
为什么文字与“1”不对齐。从<ol>? 以http://jsfiddle.net/R2tXU/为例...
Also, would it be valid to put the class="row"right on the <li>?
此外，将class="row"权利放在<li>?上是否有效？
Thanks!
谢谢！
采纳答案by user1960364
Sorry, I'm a little late responding here... However, using valid markup is important and therefore I think it's worth mentioning alternative solutions...
抱歉，我在这里回复有点晚了......但是，使用有效的标记很重要，因此我认为值得一提的替代解决方案......
Option 1
选项1
Using a little HTML and CSS, you could set the valueon each li([ Valid HTML5]):
使用一点 HTML 和 CSS，您可以value在每个li([ Valid HTML5]) 上设置：
[ JS小提琴示例]
HTML
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
CSS
ol li:nth-child(2n+0) {
list-style: none;
}
Option 2
选项 2
However, if you're going for a purely CSS approach, this is probably the best option...
但是，如果您要采用纯 CSS 方法，这可能是最好的选择......
[ JSFiddle 示例]
HTML
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
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: "";
}
However, do keep in mind [ browser compatibility].
但是，请记住 [浏览器兼容性]。
回答by kiranvj
This is how I fixed it. No other additional styles, only Bootstrap classes.
这就是我修复它的方式。没有其他额外的样式，只有 Bootstrap 类。
You just need to add these class to rowdiv d-inline-flex w-100
您只需要将这些类添加到rowdivd-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>
