两行导航，第二行元素等宽导航对齐答案

【问题标题】：Two row navigation, second row elements equal-width nav-justified两行导航，第二行元素等宽导航对齐
【发布时间】：2019-06-20 00:22:32
【问题描述】：

因此尝试使用两行实现响应式可折叠导航，其中第一行包括徽标和语言选择以及第二行主链接：

|                                                             |
|                             LOGO          lang              |
|        link1        link2         link3        link4        |

jsfiddle snippet of progress so far

主链接无法获得相等的宽度，因此它们在 lg 视口及上方水平均匀分布。使用的结构和类链接堆叠得非常紧密。

第二行导航：

<ul class="navbar-nav nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link" href="#">Home</a>
  </li>    
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
      Categories
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item">Cat 1</a>
      <a class="dropdown-item">Cat 2</a>
      <a class="dropdown-item">Cat 3</a>
      <a class="dropdown-item">Cat 4</a>
    </div>
  </li>

  <li class="nav-item">
    <a class="nav-link" href="#">Live Auction</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact us</a>
  </li>
</ul>

任何想法如何覆盖类或其他解决方案？谢谢！

【问题讨论】：

所以你想让链接均匀分布？
@Adrift 是的，完全正确。我已经包含了 jsfiddle 的链接，全屏打开你会看到第二行的链接堆得很紧。

标签： html css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

通过将 flex-basis 从 0 更改为 auto 来指定弹性项目 (li) 的初始大小以匹配内容——您可以使用 flex-fill 类在 Bootstrap 4 中启用。将其添加到您的 HTML：

<li class="nav-item flex-fill">
    <a class="nav-link" href="#">Live Auction</a>
</li>

或者在你的 CSS 中添加属性：

.nav-justified li.nav-item {
    /* ... */
    flex-basis: auto;
}

小提琴示例：https://jsfiddle.net/wcj1gzr5/1/

要分配具有justify-content: space-between 效果的弹性项目，包含弹性项目的div 和ul 的宽度应该扩大它们的宽度（为分配弹性项目提供可用空间）。为此，请在两个元素上设置 min-width: 100%; 以让它们填充其包含元素，然后在 ul 上使用 justify-content 来控制间距和定位。

小提琴示例：https://jsfiddle.net/wcj1gzr5/2/

【讨论】：

我看到它排在第二行，太棒了！除了我瞄准的结果是（或曾经......）均匀分布在整个容器中，比如 getbootstrap.com/docs/4.0/components/navs/#fill-and-justify 这就是为什么包含 nav-pills 和 nav-justified 类。
真的很壮观！也会出去帮助别人！非常感谢！

【解决方案2】：

您可以通过将width:100% 添加到.navbar-collapse, .nav-pills 来执行此操作。下面是相同的sn-p

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
    .navbar-collapse,
    .nav-pills {
      width: 100% !important
    }
    
    header {
      width: 100%;
      background: #282828;
      background-position-x: 0%;
      background-position-y: 0%;
      background-image: url("https://cdn.wallpapersafari.com/65/40/cJtjUm.jpg");
      background-size: cover;
      background-position: center;
    }
    /* center the logo */
    
    .navbar {
      justify-content: center;
    }
    /* in order to center the logo */
    
    .navbar .navbar-toggler {
      position: absolute;
      right: 1rem;
      top: 0.5rem;
    }
    /* center all navbar items */
    
    .navbar-nav {
      align-items: center;
    }
    /* since it's expanding at lg */
    
    @media (min-width: 992px) {
      /* in order to display in 2 rows */
      .navbar-expand-lg {
        flex-flow: column nowrap;
      }
      /* same logic as the navbar-toggler above */
      .navbar-nav.upper-controls {
        position: absolute;
        right: 1rem;
        top: 0.5rem;
        font-size: 85%;
      }
    }
  </style>
</head>

<body>

  <header>
    <div class="container">
      <div class="row">
        <div class="col">
          <nav class="navbar navbar-expand-lg navbar-light">
            <a href="#" class="navbar-brand">
                            CompanyLogo
                        </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
                            <span class="navbar-toggler-icon"></span>
                        </button>
            <div class="collapse navbar-collapse">
              <ul class="navbar-nav upper-controls">
                <li class="nav-item">
                  <a class="nav-link" href="#">Language</a>
                </li>
              </ul>
              <ul class="navbar-nav nav nav-pills nav-justified">
                <li class="nav-item">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                                        Categories
                                    </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item">Cat 1</a>
                    <a class="dropdown-item">Cat 2</a>
                    <a class="dropdown-item">Cat 3</a>
                    <a class="dropdown-item">Cat 4</a>
                  </div>
                </li>

                <li class="nav-item">
                  <a class="nav-link" href="#">Live Auction</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact us</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>


</body>

</html>

【讨论】：