15

我的引导响应背景有问题。

如下所示，当我的窗口缩小以模拟移动屏幕尺寸时，我的下拉菜单变得透明。

导航栏

这是我的代码，它是从引导示例网站复制的，我所做的唯一更改是链接。

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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 class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Dashboard</a></li>
            <li><a href="#pages">Pages</a></li>
            <li><a href="#extensions">Extensions</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 class="navbar-right">
            <p style="color:#fff;">some text</p>
          </div>
        </div><!--/.navbar-collapse -->
      </div>
</div>

[编辑] 我的标题中有这个

<meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
4

8 回答 8

55

当您锁定导航栏的高度时会发生这种情况。检查 CSS 并更改：

height: 50px;

进入这个：

min-height: 50px;
于 2014-01-23T12:49:48.767 回答
1

刚碰到这个。.navbar-collapse为元素添加背景样式...

<div class="navbar-collapse collapse">

变成

<div class="collapse navbar-collapse" style="background:black">

这似乎为我解决了问题，希望对您有所帮助！

于 2014-01-17T18:09:42.147 回答
1

我有同样的问题，我通过position: relative;在导航 div 中添加一个 css 属性解决了这个问题：

<div class="navbar navbar-fixed-top>

成为：

<div class="navbar navbar-fixed-top" style="position: relative;">
于 2013-10-26T19:30:19.017 回答
1

使用 style.css 中的下一行

.navbar-collapse{ 
    background-color: white;
}
于 2018-10-30T14:02:59.777 回答
0

上述解决方案都不适合我。但是当我给我navbar一个明显更高的 z-indexz-index: 9999;时，透明度就消失了。

于 2015-03-05T19:47:21.543 回答
0

我能够通过这种方式解决问题：

.navbar {
  min-height: 85px;
  height: auto !important;
}
于 2019-02-12T16:39:56.987 回答
0

您可能缺少 .icon-bar 的背景颜色。我已将导航栏的背景设置为白色，所以这是我的问题。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="color: black">
            <span class="sr-only ">{% trans "Toggle Navigation" %}</span>
            <span class="icon-bar grey_dark_l_bg"></span>
            <span class="icon-bar grey_dark_l_bg"></span>
            <span class="icon-bar grey_dark_l_bg"></span>
        </button>
于 2017-07-27T12:45:53.440 回答
-1

您必须在 navbar li a 中添加背景，此示例 CSS 代码：

.navbar li a, .navbar .navbar-brand {
      color: #fff !important;
      background-color: #08A2FA;
      line-height: 1.42857143 !important; /* this for line in desktop mode */
  }
于 2016-11-24T01:28:35.787 回答