引导3：导航栏选项卡等于页面宽度

Question

我试图创建间隔选项卡。我希望它们中的6-8个在屏幕宽度上运行，每个都有相等的距离。我也需要他们有悬停下拉的能力。

最初，我使用Bootstrap 3来快速和快速地制作标签。但是，我似乎无法让它们在整个页面宽度上均匀分布。

或者，我发现这个真棒snippet是纯CSS的代码。但是，我远离css向导，并且像制表符一样纯粹的下拉菜单会花费我很长时间。

任何人都知道解决引导3问题的间距或知道我可以得到一个纯CSS的下拉解决方案？ Bootstrap 3代码如下，jsfiddle中的纯css链接

谢谢！

代码：

<ul class='nav nav-tabs'> 
    <li class='dropdown'> 
    <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 1</a> 
    <ul class='dropdown-menu'> 
     <li><a href='#'>test 1</a></li> 
    </ul> 
    </li> 
    <li class='dropdown'> 
    <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 2</a> 
    <ul class='dropdown-menu'> 
     <li><a href='#'>test 2</a></li> 
    </ul> 
    </li> 
    <li class='dropdown'> 
    <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 3</a> 
    <ul class='dropdown-menu'> 
     <li><a href='#'>test 3</a></li> 
    </ul> 
    </li> 
</ul> 

Answer 1

您可以container-fluid类附上一个div里面的代码。它会帮助你利用apge的整个宽度。

ul.nav-tabs > li { 
 
    width: 33%; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <ul class='nav nav-tabs'> 
 
    <li class='dropdown'> 
 
     <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 1</a> 
 
     <ul class='dropdown-menu'> 
 
     <li><a href='#'>test 1</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class='dropdown'> 
 
     <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 2</a> 
 
     <ul class='dropdown-menu'> 
 
     <li><a href='#'>test 2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class='dropdown'> 
 
     <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 3</a> 
 
     <ul class='dropdown-menu'> 
 
     <li><a href='#'>test 3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>