Question

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

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

navbar http://i44.tinypic.com/rw49p4.png

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

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

Answer 1

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

height: 50px;

进入这个：

min-height: 50px;

祝你好运。

Answer 2

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

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

成了：

<div class="navbar navbar-fixed-top" style="position: relative;">

Answer 3

我遇到了同样的问题，我使用style.css中的下一行解决了该问题

.navbar-collapse{ 
    background-color: white;
}

我希望这项工作能在您的项目中发挥作用。

Answer 4

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

<div class="navbar-collapse collapse">

变为

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

这似乎解决了我的问题，希望它可以帮到你！

Answer 5

上述解决方案均不适合我。但是，当我向navbar提供了一个明显高于z-index: 9999;的z-index时，透明度就消失了。

Answer 6

有同样的问题

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

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

快乐编码

Answer 7

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

.navbar {
  min-height: 85px;
  height: auto !important;
}

Answer 8

你必须在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 */ }

窗口缩小时，bootstrap折叠栏变为透明

8 个答案: