Justify Nav-хапчета с Bootstrap v4

Искам да оправдая навигационната си лента по ширината на div. Проблемът е, че използвам Bootstrap v4 и класът nav-justify все още не е наличен.

Ето кода:

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

Не искам да използвам проценти в CSS за това; Искам нещо, което е отзивчиво.


html css responsive-design twitter-bootstrap bootstrap-4
person SatanicGeek    schedule 22.12.2015    source източник

Отговори (3)


arrow_upward
4
arrow_downward

наистина nav-justify class липсва. Засега можете да го добавите сами въз основа на кода на TB3:

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

големи екрани въведете описание на изображението тук

малък екран въведете описание на изображението тук

АКТУАЛИЗАЦИЯ: От BS4 alpha 6, nav-justified се завръща, заедно с нов клас nav-fill http://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify

person Bass Jobsen    schedule 23.12.2015
comment
Трябва да сменя 2-3 неща, но точно това ми трябва. Ще променя точката на прекъсване на md. Просто трябва да инсталирам SCSS компилатор. Благодаря ти за помощта ! - person SatanicGeek; 23.12.2015

arrow_upward
2
arrow_downward

От Bootstrap alpha 6, nav-justified се завръща и има нов nav-fill клас.

http://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify

Просто трябва да добавите класа към вашия nav..

<ul class="nav nav-pills nav-justified">
        ..
</ul>

Bootstrap 4 Justified Nav

person Zim    schedule 23.02.2017

arrow_upward
1
arrow_downward

Имаха го в документацията на Boostrap v.4 alpha, на тази страница, но сега не работи.

Има съответен тикет за това и вече има създаден заявка за изтегляне за v4-dev клон.

Публикуването на целия кодов фрагмент тук няма смисъл, така че промените може да видите тук и за да закърпите своя SASS файл:

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

@mixin nav-justified {
  width: 100%;

  .nav-item {
    float: none;
  }

  .nav-link {
    margin-bottom: $nav-tabs-justified-link-margin-bottom;
    text-align: center;
  }

  .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  @include media-breakpoint-up(md) {
    .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;
    @include border-radius($nav-tabs-justified-link-border-radius);
  }

  .nav-link.active {
    @include plain-hover-focus {
      border: $nav-tabs-justified-link-border-width solid $nav-tabs-justified-link-border-color;
    }
  }

  @include media-breakpoint-up(md) {
    .nav-link,
    .nav-link.disabled,
    .nav-link.disabled:hover {
      border-bottom: $nav-tabs-justified-link-border-width solid $nav-tabs-justified-link-border-color;
      @include border-top-radius($nav-tabs-justified-link-border-radius);
    }
    .nav-link.active {
      @include plain-hover-focus {
        border-bottom-color: $nav-tabs-justified-active-link-border-color;
      }
    }
  }
}
person Farside    schedule 31.03.2016