Question

我正在使用Bootstrap 4。

如何制作像SO导航栏一样的导航栏？

将内容对齐为＆＃34;容器＆＃34;但是容器流体的宽度＆＃34;在bootstrap 4？

我想要＆＃34;固定顶部＆＃34;的宽度导航栏设置没有固定顶部和导航栏内容在＆＃34;容器＆＃34;。

我会提供一个示例，但我尝试制作与此页面顶部的导航栏完全相同的内容。

Answer 1

围绕.container元素包裹元素。

＆＃13;

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

#primary-nav {
  background-color: skyblue;
}

＆＃13;

<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>

＆＃13;

Answer 2

我能够将菜单设置为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中使用 n-fill w-100

Answer 3

我也遇到过这个问题。我通过将<nav>...</nav>放在<div class='container'>...</div>或<div class='container-fluid'>...</div>之外来解决。

Answer 4

我尝试了@ 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">

这里有几种可行的方法。

如果要保留container，则可以使用这种内联样式。 <div class="container" style="max-width:100%;">是因为container的最大宽度设置为1140px。
使用container-fluid代替container
完全不使用container。完全删除div。

另请参见https://codepen.io/nishitmistry/pen/VwwozwL

Bootstrap 4：如何在容器中使用带有内容的全宽导航栏（如SO导航栏）？

4 个答案: