Twitter的Bootstrap 3在同一页面上有多个导航栏

时间:2013-09-22 13:21:45

标签: css twitter-bootstrap twitter-bootstrap-3 navbar

同一页面下拉列表中的多个导航栏将与其他导航栏重叠,请参阅:

enter image description here

如何防止这种情况?

1 个答案:

答案 0 :(得分:4)

尽管导航栏仅供单独使用,但您可以每页更多地使用一个导航栏。同一页面上的多个导航栏将具有相同的z-index(1000),因此下拉列表可能会重叠。当使用更多导航栏时,为每个导航栏提供不同的z-index(和id)。第二个z-index应该低于第一个z-index等。

B.e。有这样的导航栏: <nav id="navbar1" class="navbar" role="navigation"> <nav id="navbar2" class="navbar" role="navigation"> <nav id="navbar3" class="navbar" role="navigation"> <nav id="navbar4" class="navbar" role="navigation">

通过以下方式设置z-indexes:

#navbar2 {z-index:999;}
#navbar3 {z-index:998;}
#navbar4 {z-index:997;}