Bootstrap 4：如何让top fixed navbar停留在容器内不拉伸？

Question

很抱歉，我的问题可能与 this:
重复 Bootstrap fixed navbar inside div 或者这个：
Twitter Bootstrap: How to make top fixed navbar stay in container and not stretch?
或许多类似的，但三年过去了，Bootstrap 几乎将其版本从第 2 更新到第 4，但问题仍然存在。
所以我正在寻找一些优雅而简单的方法来使固定导航栏留在内部 parents div.container.
这是我从官方文档中复制并稍作修改的代码：

<div class="container">
    <nav class="navbar navbar-fixed-top navbar-light bg-faded">
        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" 
            data-target="#navbarResponsive" aria-controls="navbarResponsive" 
            aria-expanded="false" aria-label="Toggle navigation">
        </button>
        <div class="collapse navbar-toggleable-md" id="navbarResponsive">
            <a class="navbar-brand" href="#">
                <img src="" width="30" height="30" class="d-inline-block align-top" alt="">Navbar
            </a>
            <ul class="nav navbar-nav float-md-right">
                <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" href="#">Link</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

Answer 1

编辑 - 我错误地给出了 Bootstrap 3 答案而不是 Bootstrap 4。

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
    <div class="container">
        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
            aria-expanded="false" aria-label="Toggle navigation"></button>
        <div class="collapse navbar-toggleable-md" id="navbarResponsive">
            <a class="navbar-brand" href="#"><img src="favicon1.png" width="30" height="30" class="d-inline-block align-top" alt=""> Navbar</a>
            <ul class="nav navbar-nav float-md-right">
                <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" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <div class="next">Head</div>
</div>

您想将 "container" div 放在您的导航栏中。

Answer 2

感谢您的所有回答，但我终于在这里找到了答案：Fixed position but relative to container
这个习惯 CSS 真的很有帮助：

.container {
padding: 0px;
}

nav.navbar {
  width: inherit;
  left: 50%;
  transform: translateX(-50%);  
}

Answer 3

这有点棘手。

除了将 <div class="container"></div> 放入 nav.navbar 之外，我还必须使用以下内容 CSS 以便切换器和徽标在移动设备上不会重叠：

  @media (max-width: 767px) {
    .navbar .container {
      width: 100%;
    }
  }

我的导航栏代码如下所示（通用）：

<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
  <div class="container">
    <div class="navbar-header">
      <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="{{ home_url('/') }}">
        <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> SITENAME
      </a>
    </div>
    <div class="collapse navbar-collapse " id="navbarSupportedContent">
      <ul class="nav navbar-nav float-md-right">
        <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" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

我的导航栏代码看起来像这样（对于 wordpress）：

<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
    <div class="container">
      <div class="navbar-header">
        <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="{{ home_url('/') }}">
          <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
          {{ get_bloginfo('name', 'display') }}
        </a>
      </div>

      <div class="collapse navbar-collapse " id="navbarSupportedContent">

        @if (has_nav_menu('primary_navigation'))
          {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => new wp_bootstrap_navwalker(), 'menu_class' => 'nav navbar-nav mr-auto']) !!}
        @endif
      </div>
    </div>
  </nav>

JSFIDDLE

Answer 4

我发现最简单的解决方案是从 <nav> 元素中删除 .navbar-fixed-top class 并将其应用于包裹 [=11] 的 <div class="container"> =].此解决方案不需要任何自定义 CSS 并且可以跨设备使用。

<div class="container fixed-top">
    <nav class="navbar navbar-light bg-faded">

Answer 5

/*ur custom css*/
.container-fluid{
    background-color: black;
}

<div class="container-fluid">
  <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark ">
    <div class="container">
      <a class="navbar-brand inline-flex items-center" href="{{ home_url('/') }}">
          <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
          {{ get_bloginfo('name', 'display') }}
      </a>
      <button class="navbar-toggler" 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>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-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" href="#">Link</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

Bootstrap 4：如何让top fixed navbar停留在容器内不拉伸？

Bootstrap 4: How to make top fixed navbar stay in container and not stretch?

css

bootstrap-4