Question

我有这段代码，无法弄清楚如何将navbar-brand与链接保持在一起。

    <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中以使整个组居中时，它不起作用并打破折叠按钮。

我只能找到有关如何将导航中心与左侧链接对齐的信息，但没有关于在居中时保持导航与链接分组的信息。

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

Answer 1

我不完全确定您使用col-5和col-7，但是要对其进行分组以对导航栏品牌和导航项进行分组，将两者都包含在内一个div并使用flexbox util类来居中...

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

将navbar-brand与链接分组

<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轴）自动边距设为中心。

相关：
Center an element in Bootstrap 4 Navbar

Answer 2

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

<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

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

覆盖flex-grow的{{1}}属性。目前，它是navbar-collapse。

flex-grow: 1

使用.flex-grow-zero { flex-grow: 0 !important; }类覆盖justify-content-center的{{1}}属性。您可能知道，它将flex元素的内容对齐在其中心。
从justify-content:space-between列表中删除navbar类。

m-auto

navbar-nav

选中此pen on Codepen

如何保持navbar-brand与链接分组

2 个答案:

请记住使用最新版本的Bootstrap。