Bootstrap - 添加下拉菜单（语言切换器）答案

【问题标题】：Bootstrap - add dropdown menu (language switcher)Bootstrap - 添加下拉菜单（语言切换器）
【发布时间】：2017-08-16 15:44:13
【问题描述】：

我在我的测试项目中使用引导程序 3.3.7。这是制作链接： http://colorfill.ionic.host/test/

您会注意到右上角有一个 LANG 下拉菜单。虽然悬停它会以某种方式显示内容，但看起来 z-index 太小了。增加它 - 什么都不改变。

我正在使用以下代码：

<ul class="social pull-right">  

                            <li class="dropdown">
                                <a href="#" title="Language" class="icon-request">LANG:</a>
                                    <ul class="dropdown-menu zom">
                                        <li><a href="index.html">POL</a></li>
                                        <li><a href="index2.html">ENG</a></li>
                                        <li><a href="index3.html">UA</a></li>
                                    </ul><!-- /.dropdown-menu -->                               
                            </li>
                            <li><a href="#"><i class="icon-s-facebook"></i></a></li>                            
                        </ul>

那么有什么问题吗？我应该编写自己的 .dropdown 类吗？我不想破坏当前的导航菜单..

【问题讨论】：

标签： css twitter-bootstrap dropdown

【解决方案1】：

将.navbar-header 的z-index 增加到1，目前是0。喜欢：

.navbar-header {
  z-index: 1;
}

无论如何都需要增加父元素的z-index 你的孩子 z-index 是，如果你父母的 z-index 低于孩子的 z-index 它不会工作。

希望这会有所帮助！

【讨论】：

【解决方案2】：

将此css 代码添加到custom.css 中的line9：

.navbar-header {
    z-index: 1;
}

【讨论】：

【解决方案3】：

为具有 navbar-header 类的父 div 添加样式

  <div class="navbar-header" style=" z-index: 1;">

【讨论】：

【解决方案4】：

添加到 .navbar-header z-index: 1;

【讨论】：