Bootstrap и нумерованных списков

Question

Использование Bootstrap 3.3.5 и эту разметку,

<div id="panelSteps" class="panel panel-default"> 
    <div class="panel-heading hidden-print">Actions</div> 
    <ol class="item-steps list-group"> 
    <li class="list-group-item"><a href="#">Some action</a></li> 
    <li class="list-group-item"><a href="#">Other action</a></li> 
    </ol> 
</div> 

Является ли возможно иметь номера списка отображения? Я попытался переопределить OL element's style с list-style:decimal inside; и overflow:visible; и т. Д. Я не могу увидеть цифры рядом с элементами списка.

Спасибо!

Answer 1

Вы, вероятно, хотите, чтобы играть с моделированием, пока не будет удовлетворительным дизайн мудрым, но это приведет номера назад:

.item-steps { 
    margin-left: 20px; 
} 

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

Answer 2

Вот исправление: https://jsfiddle.net/9ehyyrct/ В JSFiddle я использую Bootstrap 3.3.6, но это относится и к 3.3.5.

К сожалению, это довольно Hacky:

.list-group-item { 
    display: list-item; 
    margin-left:30px; 
} 

.list-group-item a { 
    margin-left:-10px; 
} 

Элементы отображаются при добавлении display: list-item; но они скрыты за пределами области просмотра.

Bootstrap сотрясает ваши цифры ol влево, поэтому добавление поля помогает им показать. margin-left на якоре должен противодействовать уродливому полю, который я использовал, чтобы исправить проблему. Удачи!

Answer 3

Вы можете использовать значение отображения для элемента списка, как сказано @Fausto NA и попробуйте удалить свойство margin left и запросить позицию стиля списка внутри.

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

.list-group-item { 
    display: list-item; 
    margin-left: 0px; 
} 

Вот JSFiddle я использовал с Bootstrap 3.0.0