Bootstrap 4：如何有一个全宽度的导航栏与内容在一个容器(如SO导航栏)？

8ehkhllq 于 2023-02-27 发布在 Bootstrap

关注(0)|答案(5)|浏览(356)

我正在使用Bootstrap 4。
如何制作像SO导航栏那样的导航栏？
在bootstrap 4中，内容像“容器”一样对齐，但宽度像“容器-流体”？
我想要的宽度“固定顶部”导航栏设置没有它是固定顶部和导航栏内容在一个“容器”。
我会提供一个例子，但我试图使一些完全一样的导航栏在这个页面的顶部。

twitter-bootstrap

来源：https://stackoverflow.com/questions/41622790/bootstrap-4-how-to-have-a-full-width-navbar-with-the-content-in-a-container-li

5条答案

按热度按时间

jtoj6r0c1#

我可以将菜单设置为100%宽度

<ul class="navbar-nav nav-fill w-100">
  <li class="nav-item">
    <a href="#" class="nav-link">Home</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Contact</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">About</a>
  </li>
</ul>

使用带有Bootstrap 4的nav-fill w-100

赞(0）回复(0）举报 2023-02-27

qoefvg9y2#

在.container元素周围环绕元素。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

#primary-nav {
  background-color: skyblue;
}

<div id="primary-nav">

  <div class="container">
  
    <ul class="nav">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Contact</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">About</a>
      </li>
    </ul>    
    
  </div>
  
</div>

赞(0）回复(0）举报 2023-02-27

5q4ezhmt3#

我也遇到过这个问题，我把<nav>...</nav>放在<div class='container'>...</div>或<div class='container-fluid'>...</div>外面解决了这个问题。

赞(0）回复(0）举报 2023-02-27

pdkcd3nj4#

我试过从@ravi.ram得到答案，但是它对我不起作用。下面是我的代码如何开始的。注意导航在容器之外。解决方案在代码下面。

<nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="index.html">
              <img src="images/logo.jpg">
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto mr-auto">

以下是一些行之有效的方法。
1.如果你想保留container，那么你可以使用这样的内联样式。<div class="container" style="max-width:100%;">这是因为container的最大宽度设置为1140 px。
1.使用container-fluid代替container
1.完全不要使用container。完全删除div。
另请参见https://codepen.io/nishitmistry/pen/VwwozwL