Bootstrap导航丸左右填充不相等

时间:2015-11-13 06:21:13

标签: html css twitter-bootstrap

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

2 个答案:

答案 0 :(得分:0)

margin:0 auto;提供给.nav-pills元素。 .nav-pillswidth: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>

答案 1 :(得分:0)

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