尝试扩展此导航栏并防止它在窗口缩小时折叠
这是目前的样子
这是我试图让它看起来像的
这是我的第一个 Bootstrap 元素,这是我当前的代码:
HTML:
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<img src="images/tacticIDLogo.png" height="125" width="240" border="0" />
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" >
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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 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>
</div><!--/.navbar-collapse -->
</div>
</div>
这是我的 CSS:
body{
background-color:#000000;
padding-top: 50px;
padding-bottom: 20px;
}
.navbar-nav{
margin-top:30px;
background-color:#000000;
float:right;
}
.container{
width:960px;
min-width:960px;
max-width:960px;
}
.navbar {
background-color:#000000;
height:100px;
border:0px;
}
.navbar .navbar-nav > .active > a {
background-color:#000000;
}
.navbar-inverse {
background-color:#000000;
}
.navbar-inverse .navbar-nav > .active > a {
background-color:#000000;
}
我已经与它抗争了一个小时,我觉得自己很愚蠢,因为我可以在没有 Bootstrap 的情况下轻松实现这一目标。任何帮助都会很棒......我也让 Modernizr 调用了这个,不确定这是否对此有任何影响。
最佳答案
看来您需要将包装器 div 添加到 ul.navbar-nav
<div class="navbar-header">
<img src="images/tacticIDLogo.png" height="125" width="240" border="0" />
</div>
<div class="navbar-collapse collapse">
<div class="nav-wrapper">
<ul class="nav navbar-nav">
....
</ul>
</div>
</div>
并添加一些CSS
.nav-wrapper {
height: 50px;
background-color:#333;
width: 100%;
margin-top: 30px;
}
.navbar-nav {
float: right
}
请参阅此 fiddle :http://jsfiddle.net/4jGz3/1/
关于html - 使用 Bootstrap3 使用 CSS 扩展导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19502886/