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>

Answer 2

您可以使用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>

Bootstrap导航丸左右填充不相等

2 个答案: