Bootstrap 4 nav nav-tabs 边框底部全宽屏幕

【问题标题】：Bootstrap 4 nav nav-tabs border bottom full width of the screenBootstrap 4 nav nav-tabs 边框底部全宽屏幕
【发布时间】：2019-08-28 21:48:41
【问题描述】：

image

我有一个关于 Bootstrap nav nav-tabs 的问题，我怎样才能实现与图片上显示的相同的行为（下边框是屏幕的全宽）并且选项卡位于页面的中心？

【问题讨论】：

w3schools.com/bootstrap4/bootstrap_navs.asp 可切换/动态选项卡。它总是全宽的。

标签： html css bootstrap-4

【解决方案1】：

    .bottom {
    bottom: 10px;
    position: absolute;
    width: 100%;
}

在 CSS 中添加上述类

.bottom {
  bottom: 10px;
  position: absolute;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body>
  <ul class="nav nav-tabs justify-content-center bottom">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Algo</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">DS</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Languages</a>
    </li>
  </ul>

</body>

【讨论】：