响应式 BootStrap 4 选项卡答案

【问题标题】：Responsive BootStrap 4 Tab响应式 BootStrap 4 选项卡
【发布时间】：2019-04-22 10:48:26
【问题描述】：

我正在为 BootStrap 4 选项卡使用以下代码。

<ul class="nav nav-tabs font-weight-bold">
    <li class="nav-item">
        <a class="nav-link  active" href="#details" data-toggle="tab">Page Details</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#content" data-toggle="tab">Page Content</a>
    </li>
</ul>
<div class="tab-content">
   <div role="tabpanel" class="tab-pane active" id="details">Page Details</div>
   <div role="tabpanel" class="tab-pane fade" id="content">Page Content</div>
</div>

如何使它具有响应性，以便即使在 100 像素高度和 100 像素宽度的情况下也能看到此选项卡？

【问题讨论】：

标签： html responsive-design tabs bootstrap-4

【解决方案1】：

使用这个

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

最新的 bootstrap 4.+ 导航更新，适用于各种屏幕尺寸

如果你低于 300px 会缩小到水平视图

最新引导版本的链接

https://getbootstrap.com/

【讨论】：