Bootstrap nav pill左、右填充不相等
Bootstrap nav pill左、右填充不相等
提问于 2015-11-13 14:21:13
我正在尝试使用bootstrap中的nav-pill创建一个包含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>回答 2
Stack Overflow用户
发布于 2015-11-13 14:29:14
将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>
Stack Overflow用户
发布于 2015-11-13 15:22:40
为此，您可以使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33686994
复制相关文章
相似问题
腾讯云开发者
