html - Bootstrap 导航标签全宽

Question

我使用绝对定位将 bootstrap nav-tabs 定位在容器的底部，它在一个问题上工作得很好:一旦我定位绝对，它就不再是容器的全宽了。这是一张照片:

HTML:

<div class="container-fluid">
  <ul class="nav nav-tabs profile-nav">
    <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>
</div>

CSS:

.profile-nav{
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
  background-color: #fff;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
}

.profile-nav .nav-item{
  padding-top: 15px;
  padding-bottom: 15px;
}

图像容器有 position: relative 以便像这样定位导航。所以，正如我所说，问题是，我无法使它成为容器流体的全宽。

Answer 1

要将导航选项卡固定在底部，您需要使用 Bootstrap 类navbar-fixed-bottom将您的元素包装到导航中

<nav class="navbar navbar-default navbar-fixed-bottom profile-nav">

我认为导航标签不是底部菜单的最佳形式。尝试使用 nav-pills 代替。

看片段

.profile-nav {
  background-color: #fff;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
  border: none;
}

.profile-nav .nav-item {
  padding-top: 15px;
  padding-bottom: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-bottom profile-nav">
 <div class="container-fluid">
   <ul class="nav nav-pills">
    <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>
 </div>
</nav>