css Bootstrap 3:导航栏不是全宽

xesrikrc  于 2023-08-09  发布在  Bootstrap
关注(0)|答案(5)|浏览(145)

我目前正在尝试在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>

字符串
图片:https://i.stack.imgur.com/Isih9.png

bwleehnv

bwleehnv1#

删除.row.col-md-12 div-它们会添加填充。只有在将内容划分为列时才需要使用它们。

n9vozmp4

n9vozmp42#

我认为这段代码看起来很好,符合你的要求。

<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

7uzetpgm

7uzetpgm3#

您不需要行和网格列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>

字符串

qco9c6ql

qco9c6ql4#

正如发生在我身上,如果你想要它与顶部的全宽度(粘性)。将fixed-top类添加到nav就可以了。

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

字符串

wbrvyc0a

wbrvyc0a5#

只需添加以下css代码body{padding:0;margin:0}。对我很有效。
希望这对你有帮助。

相关问题