Bootstrap nav pill left и right padding не равны

Question

Я пытаюсь создать контейнер с 2 вкладками, используя nav-пилюли в бутстрапе. Однако промежуток (пробел слева от кнопки) не равен расстоянию в правой части кнопки. Я также не добавил никаких специальных дополнений.

<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0"> 
<div class="container"> 
<ul class="nav nav-pills" style="width:96%;"> 
    <li class="active" style="width:48%; text-align: center;"><a href="#">Home</a></li> 
    <li style="width:48%; text-align: center;"><a href="#">Menu</a></li> 
</ul> 
</div> 

Answer 1

Дайте margin:0 auto; к .nav-pills элементу. У .nav-pills есть width:96%;, поэтому он выровнен с левой стороны от .container. Используя margin:0 auto;, .nav-pills центрируется по горизонтали.

Jsfiddle

<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0"> 
<div class="container"> 
//Add margin:0 auto; 
<ul class="nav nav-pills" style="width:96%;margin:0 auto;"> 
    <li class="active" style="width:48%; text-align: center;"><a href="#">Home</a></li> 
    <li style="width:48%; text-align: center;"><a href="#">Menu</a></li> 
</ul> 

Answer 2

Вы можете использовать nav-justified для этого, а затем просто настроить правила отображения для под 768px в случае, если вы не хотите, чтобы стек.

См. Рабочий фрагмент примера.

/**BORDER FOR DEMO ONLY*/ 
 

 
.nav.nav-justified { 
 
    border: 1px solid #f00; 
 
    border-radius: 4px; 
 
} 
 
/**BORDER FOR DEMO ONLY*/ 
 

 
@media (max-width: 767px) { 
 
    .nav-justified.nav-pills-nav > li { 
 
    display: table-cell; 
 
    width: 1%; 
 
    } 
 
    .nav-justified.nav-pills-nav > li > a { 
 
    margin-bottom: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <h3>Won't stack on Mobile</h3> 
 
    <ul class="nav nav-pills nav-justified nav-pills-nav"> 
 
    <li class="active"><a href="#">Home</a> 
 

 
    </li> 
 
    <li><a href="#">Menu</a> 
 

 
    </li> 
 
    </ul> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <h3>Default: Will stack on Mobile</h3> 
 
    <ul class="nav nav-pills nav-justified"> 
 
    <li class="active"><a href="#">Home</a> 
 

 
    </li> 
 
    <li><a href="#">Menu</a> 
 

 
    </li> 
 
    </ul> 
 
</div>