Question

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

|                                                             |
|                             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>

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

Answer 1

通过将li从flex-basis更改为0，指定弹性项目（auto）的初始大小以匹配内容-您可以在Bootstrap 4中通过以下方式启用使用flex-fill类。将其添加到您的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%;的宽度扩展（给可用空间来分配伸缩项目）。为此，请在两个元素上设置justify-content，以使其填充其包含的元素，然后在ul上使用@IBOutlet var sceneView: ARSCNView!，以控制间距和位置。

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

Answer 2

您可以通过将width:100%添加到.navbar-collapse, .nav-pills来实现。以下是相同的代码段

<!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>

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

2 个答案: