Question

对不起，我的问题可能会重复到这个：
Bootstrap fixed navbar inside div 或者：
Twitter Bootstrap: How to make top fixed navbar stay in container and not stretch?
或许多相似，但三年过去了，Bootstrap几乎将其版本从第2版更新为第4版，但问题仍然存在。因此，我正在寻找一些优雅而简单的方法，使固定的导航栏保持在父母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

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

<nav>

Answer 2

这有点棘手。

除了将<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 3

编辑 - 我错误地给了一个Booststrap 3答案而不是Boostrap 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>

你想把＃34;容器＆＃34;导航中的div。

Answer 4

感谢您的所有答案，但我最后在这里找到了答案：Fixed position but relative to container
这个自定义CSS非常有用：

.container {
padding: 0px;
}

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

Bootstrap 4：如何使顶部固定导航栏留在容器中而不是拉伸？

4 个答案: