Question

我在我的测试项目中使用bootstrap 3.3.7。这是生产链接： http://colorfill.ionic.host/test/

正如您将在右上角看到的那样，有一个LANG下拉菜单。虽然悬停它会以某种方式显示内容，但看起来z-index看起来很小。增加它 - 什么也不改变。

我正在使用以下代码：

'use strict'
const funcUnderTest = (query) => ({
  query: /^sort/.test(query) ? query : {$sort: {priority: -1, createdAt: -1}}
})

console.log(funcUnderTest(null)) // Should be { query: {$sort: {priority: -1, createdAt: -1}}}
console.log(funcUnderTest(({}))) // Should be { query: {$sort: {priority: -1, createdAt: -1}}}
console.log(funcUnderTest(({forCandidate: 123}))) // Should be { query: {forCandidate: 123, $sort: {priority: -1, createdAt: -1}}}
console.log(funcUnderTest(({$sort: {name:1}}))) // Should be { query: {$sort: {name: 1}}}
console.log(funcUnderTest(({forCandidate: 123, $sort: {name:1}}))) // Should be { forCandidate: 123, query: {$sort: {name: 1}}}

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

Answer 1

将z-index的{{1}}增加到.navbar-header，目前为1。像：

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

希望这有帮助！

Answer 2

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

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

Answer 3

为 navbar-header 类为

的父div添加样式

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

Answer 4

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

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

4 个答案: