Question

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

如何使其具有响应性，以便即使在高度为100px和宽度为100px的情况下也可以看到此标签？

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

最新的引导程序4. +导航更新，适用于每种屏幕尺寸

如果您的像素低于300像素，将缩小为水平视图

链接以获取最新的引导程序版本

https://getbootstrap.com/

响应式BootStrap 4选项卡

1 个答案: