twitter-bootstrap Bootstrap <div class="navbar navbar-fixed-top">

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17533106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:33:52  来源:igfitidea点击:

Bootstrap <div class="navbar navbar-fixed-top">

htmlcsstwitter-bootstrapfixednavbar

提问by Kasper L?g?rd

I am trying to built a site with Bootstrap. So far everything is going pretty much as planned. I would like a fixed navbar and I am using the built in function:

我正在尝试使用 Bootstrap 构建一个站点。到目前为止,一切都按计划进行。我想要一个固定的导航栏,我正在使用内置函数:

<div class="navbar navbar-fixed-top">

This is great and just what I need BUT I would like the navigation and title to start at the same place as the container instead of all the way to the left/right (still having the navbar going 100% in width. I have tried to put a container inside the navbar which was not the correct solution :-)

这很棒,正是我所需要的,但我希望导航和标题与容器在同一位置开始,而不是一直向左/向右(导航栏的宽度仍然为 100%。我曾尝试在导航栏中放置一个容器,这不是正确的解决方案:-)

回答by Austin Pray

example

例子

<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="./index.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a href="./index.html">Home</a>
              </li>
              <li>
                <a href="./getting-started.html">Get started</a>
              </li>

              ...

              <li>
                <a href="./customize.html">Customize</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

or throw

或扔

.navbar { 
    max-width: 1170px; /* width of .container */
    margin: 0 auto;
}

into the css

进入css

回答by Tim Joyce

You should have a container class nested inside your navbar

您应该在导航栏中嵌套一个容器类

<div class="navbar navbar-fixed-top">
   <div class="container">your menu and logo go here</div>
</div>

That will give you the same width as the body container if you do not have a fluid layout and will give auto margins to the container so it is centered in the middle of the screen. It will also keep the navbar itself at 100%

如果您没有流体布局,这将为您提供与正文容器相同的宽度,并且将为容器提供自动边距,使其位于屏幕中间。它还将使导航栏本身保持在 100%