Css 引导4个标签未包装

问题发生在alpha 6，而不是alpha 5

在bootstrap中，3个选项卡将环绕到下一行，以便在较小的屏幕上使用

在Bootstrap 4中，它们不会包裹并戳破屏幕的侧面。这是Bootstrap4文档中的示例

如何使其像引导3中那样包装

#视口
{
宽度：200px；
边框：1px实心#000；
}

...
...
...
...

似乎是您正在使用的Bootstrap 4版本所特有的问题：

#视口
{
宽度：200px；
边框：1px实心#000；
}

...
...
...
...

导航选项卡与其他组件一样，现在是flexbox。只需使用

flex wrap

<ul class="nav nav-tabs flex-wrap" 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="#profile" role="tab">Profile</a>
        </li>
        ...
</ul>

---

对于Bootstart 4.1.3，不要忘记包括popper.js，例如

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

目前学校缺少aria控件。这个例子对我很有用：

<div class="container">
  <h2>Navigation Tabs</h2>
  <p>Turn the nav menu into navigation tabs with the .nav nav-tabs class. Add the active class to the active/current link. If you want the tabs to be togglable, see the last example on the tutorial page.</p>
  <ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="homes-tab" data-toggle="tab" href="#homes" role="tab" aria-controls="homes" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profiles" role="tab" aria-controls="profiles" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contacts-tab" data-toggle="tab" href="#contacts" role="tab" aria-controls="contacts" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="homes" role="tabpanel" aria-labelledby="homes-tab">home</div>
  <div class="tab-pane fade" id="profiles" role="tabpanel" aria-labelledby="profiles-tab">profile</div>
  <div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">contact</div>
</div>

导航选项卡
使用.nav nav tabs类将导航菜单转换为导航选项卡。将活动类添加到活动/当前链接。如果希望选项卡可以切换，请参见教程页面上的最后一个示例









家
轮廓
接触

如果您添加popper.js，则id和aria控件似乎可以正常工作：

#视口
{
宽度：200px；
边框：1px实心#000；
}

家
轮廓
信息
设置

谢谢。我在bootstrap网站上使用了这个版本。奇怪的是这种情况发生了。它仍然在Alpha中，所以这里和那里肯定会有一些问题。是的，我在他们的github页面上报道过。从现在起我将使用这个版本。

<div class="container">
  <h2>Navigation Tabs</h2>
  <p>Turn the nav menu into navigation tabs with the .nav nav-tabs class. Add the active class to the active/current link. If you want the tabs to be togglable, see the last example on the tutorial page.</p>
  <ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="homes-tab" data-toggle="tab" href="#homes" role="tab" aria-controls="homes" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profiles" role="tab" aria-controls="profiles" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contacts-tab" data-toggle="tab" href="#contacts" role="tab" aria-controls="contacts" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="homes" role="tabpanel" aria-labelledby="homes-tab">home</div>
  <div class="tab-pane fade" id="profiles" role="tabpanel" aria-labelledby="profiles-tab">profile</div>
  <div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">contact</div>
</div>