ブートストラップ4に固定トップNavbarをセンターリングする方法

Question

固定トップナビゲーションバーをブートストラップ4 apla 6に配置しようとしていますが、その中心に配置されていません。一番上に固定してどのように中心に置くことができますか？私はウェブサイトに記載されているように、ナビゲーションバーをコンテナに入れましたが、センタリングしていません。

以下

ご覧くださいイメージの中心が、上部に固定トップ

で固定されていないが、それはコンテナ

<div class="container"> 
 
    <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse "> 
 
     <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="#">Navbar</a> 
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
     <ul class="navbar-nav mr-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 disabled" href="#">Disabled</a> 
 
      </li> 
 
     </ul> 
 
     <form class="form-inline my-2 my-lg-0"> 
 
      <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
 
     </form> 
 
     </div> 
 
    </nav> 
 
    </div>

であっても幅を埋めます

それはあなたがコンテナクラスでdivの中でそれを包む場合、それは動作しませんが、あなたがナビゲーションバーにコンテナクラスを使用する場合、それは...

Answer 1

があまりにもコンテナナビゲーションバーを作る働き思わ

http://www.codeply.com/go/sJbrJciQia

<nav class="navbar container navbar-toggleable-sm fixed-top navbar-inverse bg-inverse"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
    <div class="collapse navbar-collapse" id="navbar1"> 
     <ul class="navbar-nav"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
     </ul> 
     <ul class="navbar-nav ml-auto"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
     </ul> 
    </div> 
</nav>