如何保持导航栏品牌与链接分组答案

【问题标题】：How to keep navbar-brand Grouped with Links如何保持导航栏品牌与链接分组
【发布时间】：2018-10-02 17:45:35
【问题描述】：

我有这段代码，但不知道如何将导航栏品牌与链接保持在一起。

    <nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler collapsed"
      type="button" data-toggle="collapse"
      data-target="#navbarSupportedContent-5">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse collapse"
      id="navbarSupportedContent-5" style="">
        <ul class="navbar-nav m-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link"
            href="#">
              Features
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link"
            href="#">Pricing</a>
          </li>
        </ul>
      </div>
    </nav>

类导航栏品牌不会响应“m-auto”或“text-align:center”

当我尝试将它们全部包装在一个 div 中以使整个组居中时，它不起作用并破坏了折叠按钮。

我只能找到有关如何将 navbrand 与任一侧的链接居中的信息，但没有关于在居中时保持 navbrand 与链接分组的信息。

理想情况下，我希望创建一个固定的顶部导航栏，左侧有 col-7，右侧有 col-5，其中每一边都在自己的列中居中，这很容易用 div 做，但是这个导航栏 css 是没有以我习惯的方式回应。

【问题讨论】：

除了boostrap，你还有css文件吗？？
是的，它非常复杂，但即使我只使用引导程序运行它，导航栏也很棘手。一直在搞乱，我认为唯一的方法是手动定位绝对。似乎没有办法让导航栏品牌留在链接中
这是 mx-auto，而不是 m-auto

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

我不完全确定你想用 col-5 和 col-7 实现什么，但是要对导航栏品牌和导航项进行分组，将两者包装在一个 div 中并使用 flexbox util 类来居中...

https://www.codeply.com/go/un2DWN8OTR

保持导航栏品牌与链接分组

<nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top">
    <div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-5">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbarSupportedContent-5" style="">
            <ul class="navbar-nav align-items-center">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
              Features
            </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

注意：没有m-auto 类。使用mx-auto 将水平（x 轴）自动边距居中。

【讨论】：

【解决方案2】：

为了将所有nav 项目放在左侧，请从navbar-nav 列表中删除m-auto 类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>


<nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-5">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="navbar-collapse collapse" id="navbarSupportedContent-5" style="">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
              Features
            </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

查看pen on codepen

要对齐页面中心的所有项目，请按照以下三个步骤操作。

覆盖navbar-collapse 的flex-grow 属性。目前是flex-grow: 1。

.flex-grow-zero {
  flex-grow: 0 !important;
}

使用justify-content-center 类覆盖navbar 的justify-content:space-between 属性。您可能知道，它将 flex 元素的内容在其中心对齐。
从 navbar-nav 列表中删除 m-auto 类。

.flex-grow-zero {
  flex-grow: 0 !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top justify-content-center">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-5">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="navbar-collapse collapse flex-grow-zero" id="navbarSupportedContent-5" style="">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
              Features
            </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

检查这个pen on Codepen

记得使用最新版本的 Bootstrap。

【讨论】：