Как разместить объекты вкладки Twitter-Bootstrap

Я хочу централизовать элементы табуляции, и стиль будет таким же, но я не могу изменить свой css в настоящее время.Как разместить объекты вкладки Twitter-Bootstrap

Я хочу, чтобы элемент табуляции занимал 100% ширину (растягивается), а элементы li находились в центре элемента табуляции.

<div class="row"> 
 
    <div class="col-lg-12 centered-tabs"> 
 
    <ul class="nav nav-tabs"> 
 
     <li class="active"><a href="#">Women</a></li> 
 
     <li><a href="#">Men</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Спасибо, Б.

источник

2015-08-23 Boris Todorov

Я не думаю, что это технический, пожалуйста, вы можете показать мне вид вы хотите? –

На ссылке вы можете увидеть ее - есть нижняя граница, которая показывает с элементом вкладки. Я хочу, чтобы вкладки WOMEN и MEN были в центре http://postimg.org/image/8x54sphzb/ –

Ссылка показывает ваш результат? Я прошу изменения, которые вы хотите –

навигационной панели ссылки устанавливаются float: left по умолчанию, вам нужно сбросить его float: nonetext-align: center так что будет иметь необходимый эффект.

Также display: block в элементах списка делают их стек вертикально. Установите их в display: inline-block

.centered-tabs { 
 
    text-align: center; 
 
} 
 
.centered-tabs .nav-tabs > li { 
 
    float: none !important; /* Avoid !important, added for SO snippet priority */ 
 
} 
 
.centered-tabs .nav > li { 
 
    display: inline-block !important; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-lg-12 centered-tabs"> 
 
    <ul class="nav nav-tabs"> 
 
     <li class="active"><a href="#">Women</a> 
 
     </li> 
 
     <li><a href="#">Men</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

источник

2015-08-23 20:03:56

Как разместить объекты вкладки Twitter-Bootstrap

ответ

Смежные вопросы