bootstrap 4 alpha 中的全宽导航标签

Question

您好，如何使我的导航标签全宽，我尝试使用width:100%;无济于事。

这是我使用的 html 代码。

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#learn" role="tab">Learn More</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#faq" role="tab">Frequently Asked Questions</a>
  </li>
</ul>

Answer 1

有内置的 css 类来实现这一点。来自官方文档：

要按比例填充所有可用空间，请.nav-items使用.nav-fill. 请注意，所有水平空间都被占用，但并非每个导航项都具有相同的宽度。

<ul class="nav nav-tabs nav-fill" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#learn" role="tab">Learn More</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#faq" role="tab">Frequently Asked Questions</a>
  </li>
</ul>

对于等宽元素，请使用.nav-justified. 所有水平空间都将被导航链接占据，但与.nav-fill上述不同的是，每个导航项目的宽度都相同。

<ul class="nav nav-tabs nav-justified" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#learn" role="tab">Learn More</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#faq" role="tab">Frequently Asked Questions</a>
  </li>
</ul>

Answer 2

按照我的理解，你想width:100%对<ul class="nav nav-tabs">吧？但默认情况下<ul class="nav nav-tabs">是width: 100%你不需要给css来<ul>，但如果你想width: 100%给<li class="nav-item">然后给CSS来它是这样的：

  .nav-item {
     width:100%;
   }

否则，而不是text-align: center给<ul class="nav justify-content-center">你的html.