我需要放置六个菜单项,所以我尝试了 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;
}
我正在制作响应式网站,所以我应该首先纠正桌面版本。
最佳答案
@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 之前,请尝试简单地使背景匹配,看看它是否适合你。
关于html - Bootstrap 导航栏不适应容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31645864/