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