web-dev-qa-db-ja.com

Bootstrap 4：コンテナ内のコンテンツで全幅navbarを使用する方法（SO Navbar）と同様に？

Bootstrap 4。

SO navbarのようなnavbarを作成するにはどうすればよいですか？

コンテンツは「コンテナ」のように配置されていますが、「bootstrap 4？

固定トップでなく、「コンテナ」内のnavbarコンテンツのない「fixed-top」navbar設定の幅が必要です。

私は例を提供しますが、このページの上部にあるnavbarのようなものを作成しようとしています。

csstwitter-bootstrapresponsive-designbootstrap-4twitter-bootstrap-4
6
bbennett36

.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>
10
hungerstar

メニューの幅を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>

nav-fill w-1 with Bootstrap 4

9
Ravi Ram

私もこの問題に出会いました。 <nav>...</nav> 外 <div class='container'>...</div>または<div class='container-fluid'>...</div>。

4
Vandy Sodanheang