Question

当我调整浏览器大小时，我的三个图标栏中只有两个会显示。以前的答案显示人们没有将他们的图标栏放在正确的导航标签中，但是我已经做到了这一点并且一切正确。我的网站是可见的here,，但这里也是我的header.php代码：

＆＃13;

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

＆＃13;

Answer 1

使用自己的样式表覆盖引导程序样式。

您必须删除或指定代码（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%;
}

Answer 2

我在您的网页上找到了这条规则：

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;

}

来自bootstrap。

绝对的位置打破了它;覆盖位置为static或未设置为span.icon-bar并且它将修复它。

Answer 3

相同的代码对我来说很好。

＆＃13;

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

＆＃13;

演示Here

注意：Here

中的Bootstrap CSS

Twitter Bootstrap图标栏不显示

3 个答案: