html - Bootstrap nav pill 左右 padding 不相等

Question

我正在尝试在 Bootstrap 中使用 nav-pills 创建一个包含 2 个选项卡的容器。但是，间隙(按钮左侧的空白区域)不等于按钮右侧的间隙。我也没有添加任何特殊的填充。

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