Question

我使用Twitter Bootstrap设计了一个完整的网站，它在大多数情况下运行良好。我过去做过很多CSS，但从未做过像这样的框架。

我遇到的主要问题是，当浏览器低于600px时，标题会缩减为下拉列表（我想要的），下拉列表会显示图像和一些HTML元素，例如文本输入框和其他下拉菜单。

有没有办法让这个标题下拉菜单不透明，以便它在每个其他元素的前面？我会提供一些代码，但我不确定具体的Twitter Bootstrap样式表的哪一部分会有所帮助。

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

              <div class="navbar-inner">

                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                  </a>

                  <a class="brand" href="/">Exployre</a>

                  <div class="nav-collapse">

                    <ul class="nav">

                      <li><a href="/map">Find</a></li>

                      <li><a href="/shareadventure">Share</a></li>

                      <li><a href="/home">Inspire</a></li>

                      <li><a href="/posts">Discuss</a></li>

                      <li><a href="/groups">Groups</a></li>

                      <li><a href="/profile">Profile</a></li>

                      <li><a href="/about">About</a></li>

                  <li>        

                        <form action="/search" class="navbar-search">

                          <div>

                            <input type="text" placeholder="Search" class="search-query pull-right" name="q" size="55" />

                          </div>

                        </form>

                        <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

                      </li>



                    </ul>

                  </div><!--/.nav-collapse -->

              </div>

            </div>

我相信所有这些类都是直接来自Twitter Bootstrap CSS而没有修改。

Answer 1

您的网站内容可能有一个z-index，其值高于为Dropdown定义的z-index。

如果您正在使用LESS版本的Twitter Bootstrap，请打开variables.less并找到包含@zindexDropdown的行（在line 144上）。默认设置为1000，您可以将其更改为高于内容的z-index的数字。

如果您使用的是常规CSS，则会在.dropdown-menu的规则中定义（在line 2773上）。

使用Twitter Bootstrap Header Dropdown

1 个答案: