Question

我正在尝试将一个固定的顶部导航栏集中在Bootstrap 4 apla 6中，但它并没有居中，而是完全填满了顶部。如何固定在顶部时使其居中。我已经将导航栏放在网站上提到的容器中，但它没有居中。

请参阅下面的图片

居中但不固定在顶部

固定在顶部，但即使它在容器中也要填充宽度

＆＃13;

<div class="container">
  <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse ">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
   </div>

＆＃13;

看起来如果你将它包装在带有容器类的div中它不起作用但是如果你在导航栏中使用容器类就可以了它

Answer 1

将导航栏设为容器......

http://www.codeply.com/go/sJbrJciQia

<nav class="navbar container navbar-toggleable-sm fixed-top navbar-inverse bg-inverse">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-collapse" id="navbar1">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Answer 2

编辑：我看到这里的原始答案是所提出问题的正确答案-当您希望导航栏背景也被“包含/居中”时，该方法也适用。但是，如果您想让导航栏背景显示为全角，那是我要走的路。

在<nav>元素中添加.container会产生一个新问题：<nav>背景将停止占据整个宽度。通常这不是所需的行为。

要解决此问题，只需将元素的所有内容嵌套在.container中。如下所示：

  <nav class="navbar navbar-toggleable-sm fixed-top navbar-inverse bg-inverse">
        <div class="container">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbar1">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
            <div class="collapse navbar-collapse" id="navbar1">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

如何将固定的顶部Navbar置于引导程序4中心

2 个答案: