html - Bootstrap 导航栏不适应容器

Question

我需要放置六个菜单项，所以我尝试了 Bootstrap 导航栏，但它不能完全适应容器中的全宽。

这是应该出现的菜单 http://s11.postimg.org/4rsxptslf/menu1.jpg

但这就是我得到的: http://s11.postimg.org/sy3l0yepv/gettingenu.jpg

我的 HTML 代码

<div class="row">
            <nav class="navbar navbar-default">

                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>

                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse plr" id="bs-example-navbar-collapse-1">

                  <ul class="nav navbar-nav menu">
                    <li><a href="#">EVENTS & PROMOTIONS </a></li>       

                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>PRODUCTION </span></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">CORPORATE EVENTS</a></li>
                        <li><a href="#">EXHIBITIONS</a></li>
                        <li><a href="#">FASHIONS & BEAUTY</a></li>                      
                        <li><a href="#">CONCERTS</a></li>                       
                        <li><a href="#">TALENT ENTERTAINMENT</a></li>
                     </ul>
                    </li> 
                    <li class="dropdown-m">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">PRODUCTION <span class="caret"></span></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">CORPORATE EVENTS</a></li>
                        <li><a href="#">EXHIBITIONS</a></li>
                        <li><a href="#">FASHIONS & BEAUTY</a></li>                      
                        <li><a href="#">CONCERTS</a></li>                       
                        <li><a href="#">TALENT ENTERTAINMENT</a></li>
                     </ul>
                    </li>
                    <li><a href="#">PRINTING & BRANDING</a></li>
                    <li><a href="#">ARTISTS & TALENT</a></li>
                    <li><a href="#">FASHION</a></li>
                    <li><a href="#">VIDEO/FILM PRODUCTION</a></li>
                  </ul>     

                </div><!-- /.navbar-collapse -->
            </nav>

            </div>

我试图覆盖 Bootstrap 的 CSS 代码

<pre>
.nav > li > a {
    font-size: 16px; padding: 16px 15.0281%;
}


.menu {
    text-align: center;
}

.navbar-default .navbar-nav > li > a {
    color: #000;
}


.plr {
    padding-left: 0px;
    padding-right: 0px;
}
</pre>

我也试过

.nav > li > a {
   padding: 16px 29px;
}
.nav > li:last-child > a {
   padding: 16px 40.1px;
}

我正在制作响应式网站，所以我应该首先纠正桌面版本。

Answer 1

@Arun - 服用 http://getbootstrap.com/examples/navbar/例如，您可能缺少包装级别，或它的导航栏背景不匹配。

<nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <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="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li><a href="../navbar-fixed-top/">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

如果是背景

为了确定，我们确实需要一个指向您截屏的页面的链接，该链接显示您“确实”想要实现的目标(按钮样式也相同)以排除按钮样式与导航栏背景不同。

看起来导航栏的两边应该有一个填充，所以可能需要影响导航栏背景，这样它就不会从按钮中脱颖而出——你不想破坏导航栏元素本身的布局，因为它也需要对所有其他用例保持响应。

或者如果你讨厌两侧的任何填充

我看到的所有 bootstrap 表的两侧都有该填充，但很多人也已将其移除。

一个非常快速的谷歌搜索找到了其中的一些:

bootstrap 3 navbar-right no padding with navbar-fixed-top

Bootstrap - Removing padding or margin when screen size is smaller

这个有一个警告:White right and left margins in Bootstrap navbar

如果你真的讨厌填充，我实际上会尝试寻找没有它的 Bootstrap 主题，看看他们使用 F12(Chrome 的开发者控制台，或你使用的任何浏览器的类似控制台)做了什么

但在你开始搞乱覆盖核心 Bootstrap css 之前，请尝试简单地使背景匹配，看看它是否适合你。