Html Bootstrap 3：导航栏不是全宽

Bootstrap 3: Navbar not full width

提问by Timo Güntner

I'm currently trying to create a Navbar with 100% width in Bootstrap, but it isn't working like it should. How can I scale the Navbar to 100% width?

我目前正在尝试在 Bootstrap 中创建一个宽度为 100% 的导航栏，但它无法正常工作。如何将导航栏缩放到 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>

Picture: http://i.imgur.com/diqTvTP.png

图片：http: //i.imgur.com/diqTvTP.png

回答by Max Al Farakh

Remove .rowand .col-md-12divs – they add padding. You only need to use them when you divide content in columns.

删除.row和.col-md-12divs - 它们添加填充。仅在按列划分内容时才需要使用它们。

回答by enriqg9

You don't need the row and the grid col divs since the navbar will be at a full width at all times and you are using .container-fluid. Try this:

您不需要行和网格 col div，因为导航栏将始终处于全宽并且您正在使用.container-fluid. 尝试这个：

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

回答by Tarun Gupta

I think this code looks fine as per your requirements.

我认为根据您的要求，此代码看起来不错。

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

Please see here

请看这里

回答by Zolbayar

As happened to me, if you want it with the full width on the top (sticky). Adding fixed-topclass to the navwill do.

就像我一样，如果你想要顶部的全宽（粘性）。添加fixed-top类到nav将做。

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

回答by Rakshit Singh

Just add the following css code body{padding:0;margin:0}. It worked for me.

只需添加以下 css 代码body{padding:0;margin:0}。它对我有用。

Hope this helps.

希望这可以帮助。