[英]Twitter Bootstrap Icon-bar not Displaying
Only 2 of my three icon-bars show when I resize my browser. 调整浏览器大小时,三个图标栏中只有两个显示。 Previous answers show that people have not put their icon-bars in the right nav tag, however I have done this and it is all correct. 先前的答案表明人们没有将其图标栏放在正确的nav标签中,但是我这样做了,这都是正确的。 My website is viewable here, but here is my code for header.php too: 我的网站在这里可见,但是这里也是我的header.php代码:
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div id="logo"> <a href="http://http://www.franhaines.co.uk/paddlethewye/"/> <img src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" /></a> </div> </div>
You overide the bootstrap styles with your own stylesheet. 您可以使用自己的样式表来覆盖引导样式。
You must remove or specify your code ( http://www.franhaines.co.uk/style.css ) like so: 您必须像这样删除或指定您的代码( http://www.franhaines.co.uk/style.css ):
span:not(.icon-bar) {
color: #fff;
font-family: centrale_sans_regularregular, helvetica;
font-size: 30px;
z-index: 80;
position: absolute;
display: block;
top: 50%;
text-align: center;
width: 100%;
}
I found this rule on your page: 我在您的页面上发现了以下规则:
span {
color: #fff;
display: block;
font-family: centrale_sans_regularregular,helvetica;
font-size: 30px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
z-index: 80;
} }
from bootstrap. 从引导程序。
The position absolute is breaking it; 绝对职位正在打破它; override position to be static or unset for span.icon-bar and it'll fix it. 将span.icon-bar的位置替换为静态或未设置,它将对其进行修复。
Same Code Works Fine For Me. 相同的代码对我来说很好。
<link href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel = "stylesheet"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div id="logo"> <a href="http://http://www.franhaines.co.uk/paddlethewye/"/> <img src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" /></a> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.