使用 Bootstrap v4 证明导航药丸的合理性

Posted 2023-03-05

【中文标题】使用 Bootstrap v4 证明导航药丸的合理性

【英文标题】：Justify Nav-pills with Bootstrap v4

【发布时间】：2016-03-28 11:36:56

【问题描述】：

我想在 div 的宽度上证明我的导航栏是合理的。问题是我使用Bootstrap v4 并且 nav-justify 类还不可用。

代码如下：

<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 中使用百分比来做到这一点；我想要响应式的东西。

【参考方案1】：

从 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

【参考方案2】：

确实缺少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="#">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

【讨论】：

我需要改变 2-3 件事，但这正是我所需要的。我将断点更改为 md。我只需要安装 SCSS 编译器。感谢您的帮助！

【参考方案3】：

他们在 Boostrap v.4 alpha、on this page 的文档中拥有它，但现在它已经坏了。

有对应的ticket for this，已经创建了pull request for v4-dev branch。

在这里发布整个代码sn-p，没有意义，所以the changes you may see here，并修补自己的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;