1

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

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

jsfiddle 到目前为止的进展片段

主链接无法获得相等的宽度，因此它们在 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>

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

4

2 回答 2

1

li通过更改flex-basisfrom0来指定弹性项目 ( ) 的初始大小以匹配内容auto- 您可以使用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的宽度效果的 flex 项div，并且ul包含 flex 项应该扩展它们的宽度（为分配 flex 项提供可用空间）。为此，请min-width: 100%;在两个元素上进行设置，让它们填充其包含的元素，然后使用justify-content来ul控制间距和定位。

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

于 2019-06-19T14:37:29.560 回答
1

您可以通过添加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>

于 2019-06-19T15:19:22.607 回答