如何使用Twitter Bootstrap组件制作有序列表？

Question

我有一个简单的有序列表,超级简单:

http://www.bootply.com/P8wglPiSVD

看起来像这样:

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

但twitter bootstrap没有显示任何数字,即使它是一个有序列表.

我搜索但没有找到任何推特自组件样式排序列表项目,这让我很好奇.是否缺少针对有序列表的Twitter Bootstrap的预定义样式,或者我错过了什么？

亲切的问候,

乔治

Answer 1

结合@Steve Sanders和@beiping_troop答案,您可以使用以下CSS创建干净的有序列表组:

.list-group {
    list-style: decimal inside;
}

.list-group-item {
    display: list-item;
}

http://www.bootply.com/BJadu6Ja6R

Answer 2

Bootstrap正在应用于display: block列表项,这会杀死编号.将其添加到您的CSS:

.list-group-item {
    display: list-item;
}

http://www.bootply.com/ZHQBWK9sHB