引导3:等于页面宽度的Navbar选项卡
引导3:等于页面宽度的Navbar选项卡
提问于 2016-04-13 05:49:40
我在试着创建间隔标签。我想让他们中的6-8人跑过屏幕的宽度，每个屏幕之间的距离是相等的。我也需要他们在悬停时有下降的能力。
最初，我使用了Bootstrap 3，用于快速和快速的标签。然而，我似乎不能让它们在整个页面的宽度上保持相等的空间。
或者，我发现了这个可怕的片段代码，它是纯css。然而，我并不是一个css向导，做一个像选项卡那样的纯下拉列表将花费我很长的时间。
有人知道引导3间距问题的解决方案，或者知道我在哪里可以得到一个纯css下拉解决方案？下面的引导程序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>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-04-13 05:56:39
您可以使用container-fluid类将代码封装在div中。它将帮助你利用整个宽度的凸起。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36589633
复制相关文章
相似问题
腾讯云开发者
