Html 如何使用 Twitter Bootstrap 组件制作有序列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24230990/
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 to make an ordered List with Twitter Bootstrap Component?
提问by LoveAndHappiness
I have a simple ordered list, super easy:
我有一个简单的有序列表，超级简单：
http://www.bootply.com/P8wglPiSVD
http://www.bootply.com/P8wglPiSVD
Looks like this:
看起来像这样：
<div class="container">
<div class="row">
<div class="col-xs-12">
<ol class="list-group">
<li class="list-group-item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, aliquid.</p>
</li>
<li class="list-group-item">
<p>Quos nostrum provident ex quisquam aliquid, hic odio repellendus atque.</p>
</li>
<li class="list-group-item">
<p>Facilis, id dolorum distinctio, harum accusantium atque explicabo quidem consectetur.</p>
</li>
</ol>
</div>
</div>
</div>
But twitter bootstrap isn't showing any numbers, even though it is an ordered list.
但是 twitter bootstrap 没有显示任何数字，即使它是一个有序列表。
I searched but didn't find any twitter bootstrap compontent that styles ordered list items and this makes me curious. Is there a lacking in a predefined style for Twitter Bootstrap for ordered lists or am I missing something?
我搜索了但没有找到任何样式排序列表项的 twitter bootstrap 组件，这让我很好奇。是否缺少用于有序列表的 Twitter Bootstrap 的预定义样式，还是我遗漏了什么？
Kind regards,
亲切的问候，
George
乔治
采纳答案by Steve Sanders
Bootstrap is applying display: blockto the list items, which kills the numbering. Add this to your CSS:
Bootstrap 应用于display: block列表项，这会杀死编号。将此添加到您的 CSS：
.list-group-item {
display: list-item;
}
回答by inostia
Combining @Steve Sanders and @beiping_troop answers, you can create clean ordered list-groups with the following CSS:
结合@Steve Sanders 和@beiping_troop 的答案，您可以使用以下 CSS 创建干净有序的列表组：
.list-group {
list-style: decimal inside;
}
.list-group-item {
display: list-item;
}
回答by beiping_troop
For just a clean ordered list, I chose an inline style override since I was only calling out a numbered list in one place. It rendered just fine:
对于一个干净的有序列表，我选择了内联样式覆盖，因为我只在一个地方调用了一个编号列表。它呈现得很好：
<ol style="list-style: decimal inside;">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
My reference was originally here: Bootstrap: numbers from ordered list disapear when using media object
我的参考最初在这里：Bootstrap：使用媒体对象时，有序列表中的数字消失
回答by Jayant
Manual CSS style may get overridden by the bootstrap CSS, to force the above style put !importantafter the value
手动 CSS 样式可能会被引导 CSS 覆盖，以强制上述样式将!important放在值之后
.list-group {
list-style: decimal inside !important
}
.list-group-item {
display: list-item !important
}
回答by TheKLF99
I found a better solution is to add a new css class to the list group depending on the style of numbering you want for example "list-group-numbered" or "list-group-alpha" that way you can add the numbering to only the ordered lists you want to add it to and not to all numbered lists, especially if you have somewhere else on the website that has numbered lists that now looks wrong...
我发现一个更好的解决方案是根据您想要的编号样式向列表组添加一个新的 css 类，例如“list-group-numbered”或“list-group-alpha”，这样您就可以将编号添加到您想要将其添加到而不是所有编号列表中的有序列表，特别是如果您在网站上的其他地方有编号列表现在看起来是错误的......
.list-group-numbered { list-style: decimal inside; }
.list-group-alpha { list-style: lower-alpha inside; }
.list-group-roman { list-style: lower-roman inside; }
.list-group-alpha >li, .list-group-numbered >li { display: list-item }
then you can put in the following in html..
那么你可以在html中输入以下内容..
<ol class="list-group list-group-numbered">
<li class="list-group-item">an item
<ol class="list-group list-group-alpha">
<li class="list-group-item">a sub item
<ol class="list-group list-group-roman">
<li class="list-group-item">a sub-sub item</li>
</ol>
</li>
</ol>
</li>
<li class="list-group-item">another item</li>
<li class="list-group-item">a third item</li>
</ol>
