我正在尝试使用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>

最佳答案

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>

关于html - Bootstrap导航药丸的左右填充不相等,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33686994/

10-09 15:30
查看更多