Question

我正在尝试创建间隔标签。我想要大约6-8个它们在屏幕的宽度上运行，每个都有相同的距离。我还需要它们在悬停时具有下拉功能。

最初，我使用Bootstrap 3快速选择快速标签。但是，我似乎无法在页面的宽度上将它们平均分配到空间。

或者，我发现了这个纯粹的css代码很棒snippet。但是，我远不是一个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的整个宽度。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Bootstrap 3：Navbar Tabs等于页面宽度

1 个答案: