我正在尝试在 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
水平居中。
<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 nav pill 左右 padding 不相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33686994/