부트 스트랩 3 : Navbar가 전체 너비가 아닙니다

Question

현재 Bootstrap에서 너비가 100 % 인 Navbar를 만들려고하고 있지만 꼭 그렇게 작동하지 않습니다. 너비를 100 % 너비로 조정하려면 어떻게해야합니까?

<div class="container-fluid" style="border: 1px solid"> 
     <!-- Navbar --> 
     <div class="row"> 
      <div class="col-md-12"> 
      <nav class="navbar navbar-default" role="navigation"> 
       <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">Bootflat</a> 
       </div> 
       </div> 
      </nav> 
      </div> 
     </div> 
    </div> 

사진 : http://i.imgur.com/diqTvTP.png

Answer 1

이 코드는 요구 사항에 따라 잘 보이는 것 같습니다.

<div style="border: 1px solid"> 
    <nav class="navbar navbar-default" role="navigation"> 
    <div> 
     <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Bootflat</a> 
     </div> 
    </div> 
    </nav> 
</div> 

참조하십시오 here

Answer 2

.row 및 .col-md-12 된 div를 제거 - 그들은 패딩을 추가합니다. 열의 내용을 분리 할 때만 사용하면됩니다.

Answer 3

네비게이션 막대가 항상 전체 너비에 있고 너비가 .container-fluid이므로 행과 그리드 col div가 필요하지 않습니다. 이것을 시도하십시오 :

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Bootflat</a> 
    </div> 
    </div> 
</nav>