Как создать упорядоченный список с компонентом Bootstrap Twitter?

У меня есть простой упорядоченный список, просто супер:

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 для упорядоченных списков или я что-то не хватает?

С уважением,

Джордж

Ответы

Ответ 1

Bootstrap применяет display: block к элементам списка, которые убивают нумерацию. Добавьте это в свой CSS:

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

http://www.bootply.com/ZHQBWK9sHB

Ответ 2

Объединяя ответы @Steve Sanders и @beiping_troop, вы можете создавать чистые упорядоченные группы-списки со следующим CSS:

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

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

http://www.bootply.com/BJadu6Ja6R

Ответ 3

Только для чистого упорядоченного списка я выбрал переопределение стиля inline, так как я только вызывал нумерованный список в одном месте. Это получилось просто отлично:

<ol style="list-style: decimal inside;">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Моя ссылка изначально была здесь: Bootstrap: номера из упорядоченного списка исчезают при использовании медиа-объекта

Ответ 4

Ручной стиль CSS может быть переопределен бутстрапом CSS, чтобы заставить этот стиль поставить! важно после значения

.list-group {
    list-style: decimal inside !important
}

.list-group-item {
    display: list-item !important
}