使用Bootstrap v4证明Nav-pills合理 [英] Justify Nav-pills with Bootstrap v4

问题描述

我想在div的整个宽度上调整我的导航栏.问题是我使用Bootstrap v4并且 nav-justify 类尚不可用.

I want to justify my navigation bar across the width of the div. The trouble is that I use Bootstrap v4 and the nav-justify class is not yet available.

这是代码:

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#subscribed" data-toggle="tab">Mes inscriptions</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventPassed" data-toggle="tab">Événements passés</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventNow" data-toggle="tab">Événements en cours</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventIncoming" data-toggle="tab">Événements futurs</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventCreation" data-toggle="tab">Créer un événement</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventOwn" data-toggle="tab">Mes événements</a>
    </li>
</ul>

我不想在CSS中使用百分比来做到这一点；我想要一些反应灵敏的东西.

I do not want to use percentages in CSS to do this ; I want something that is responsive.

推荐答案

表示nav-justify class丢失.您现在可以根据TB3的代码自己添加它:

indeed the nav-justify class is missing. You can add it yourself based on TB3's code for now:

SCSS代码:

// Justified nav links
// -------------------------

@mixin nav-justified {
  width: 100%;

  .nav-item {
    float: none;
  }

  .nav-link {
    text-align: center;
    margin-bottom: 5px;
  }

  > .dropdown .dropdown-menu { //todo: remove child selector
    top: auto;
    left: auto;
  }

  @include media-breakpoint-up(sm) {
    .nav-item {
      display: table-cell;
      width: 1%;
    }
    .nav-link {
        margin-bottom: 0;
    }
  }
}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
@mixin nav-tabs-justified {
  border-bottom: 0;

  .nav-link {
    // Override margin from .nav-tabs
    margin-right: 0;
    border-radius: $border-radius;
  }

  .nav-link.active,
  .nav-link.active:hover,
  .nav-link.active:focus {
    border: 1px solid $nav-tabs-justified-link-border-color;
  }

  @include media-breakpoint-up(sm) {
    .nav-link {
      border-bottom: 1px solid $nav-tabs-justified-link-border-color;
      border-radius: $border-radius $border-radius 0 0;
    }
   .nav-link.active,
   .nav-link.active:hover,
   .nav-link.active:focus {
      border-bottom-color: $nav-tabs-justified-active-link-border-color;
    }
  }
}

.nav-justified {
  @include nav-justified;
  @include nav-tabs-justified;
}

已编译的CSS代码:

.nav-justified {
  width: 100%;
  border-bottom: 0; }
  .nav-justified .nav-item {
    float: none; }
  .nav-justified .nav-link {
    text-align: center;
    margin-bottom: 5px; }
  .nav-justified > .dropdown .dropdown-menu {
    top: auto;
    left: auto; }
  @media (min-width: 544px) {
    .nav-justified .nav-item {
      display: table-cell;
      width: 1%; }
    .nav-justified .nav-link {
      margin-bottom: 0; } }
  .nav-justified .nav-link {
    margin-right: 0;
    border-radius: 0.25rem; }
  .nav-justified .nav-link.active,
  .nav-justified .nav-link.active:hover,
  .nav-justified .nav-link.active:focus {
    border: 1px solid #ddd; }
  @media (min-width: 544px) {
    .nav-justified .nav-link {
      border-bottom: 1px solid #ddd;
      border-radius: 0.25rem 0.25rem 0 0; }
    .nav-justified .nav-link.active,
    .nav-justified .nav-link.active:hover,
    .nav-justified .nav-link.active:focus {
      border-bottom-color: #fff; } }

HTML

<div class="container">
<ul class="nav nav-pills nav-justified">
  <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="#">Another link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
</div>

大屏幕

小屏幕

更新:从BS4 alpha 6开始，nav-justified和新类nav-fill http://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify

UPDATE: As of BS4 alpha 6, the nav-justified is back, along with a new class nav-fill http://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify

这篇关于使用Bootstrap v4证明Nav-pills合理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！