Question

我有一个关于Bootstrap nav nav-tabs的问题，如何实现与图片所示（底部边框是屏幕的整个宽度）相同的行为，并且选项卡位于页面的中心？

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

Bootstrap 4导航导航选项卡边框底部屏幕的整个宽度

1 个答案: