Question

我需要放六个菜单项，所以我尝试了bootstrap navbar但它没有完全适应容器中的全宽。

这就是菜单应该来的 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>

我的CSS代码我试图覆盖bootstrap

<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/为例，你可能错过了一个包装器级别， OR 它的导航栏背景不匹配。

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

如果是背景

要确切知道，我们确实需要一个链接到您截图的页面，其中显示了您想要实现的内容（按钮样式也相同），以排除按钮样式与导航栏背景不同。 / p>

看起来导航栏的两侧应该有一个填充，所以可能需要影响导航栏背景，所以它不会从按钮中脱颖而出 - 你不想打破导航栏项目的布局，因为它需要对所有其他用例保持敏感。

或者如果你讨厌边上的任何填充

我看到的所有引导表都有两侧的填充，但很多人也删除了它。

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

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的开发者控制台，或者你正在使用的任何浏览器的类似）做了什么

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

Answer 2

这就是navbar的设计方式。你想要做的不是创建菜单的好方法，因为有不同数量的屏幕尺寸和浏览器。即使你以某种方式使它在你的屏幕和浏览器上工作（适合指定的宽度），它在其他屏幕上的可能性很高。

引导导航栏不适应容器

2 个答案: