关于javascript：Bootstrap导航栏下拉菜单可水平显示菜单项

Bootstrap navbar dropdown displaying menu-items horizontally

我一直在研究一个新项目，其中导航栏必须位于页面顶部。我有以下html ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">Toggle Navigation</span>

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

</button>



<ul class="nav navbar-nav">

<li>
Home
</li>

<li>
About
</li>

<li>
Project
</li>

<li>
Resume
</li>

<li>
Contact
</li>

</ul>

和css，可将菜单项设置为居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

html, body {
margin: 0;
padding: 0;
width: 100%;
}

.container {
margin: 0;
padding: 0;
}

.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}

.center .navbar-inner {
text-align: center;
}

但是，下拉切换功能似乎可以在中等屏幕尺寸下水平显示选项。 (无法发布图片...信誉不足！对不起！)

如何获取下拉切换功能以将菜单项垂直显示为列表(默认值应如何显示)而不影响以桌面屏幕尺寸为中心的菜单项？任何帮助将不胜感激！

您应该将自定义CSS代码package在媒体查询中。

@media (min-width: 992px)仅在桌面屏幕尺寸上会影响元素。了解有关网格系统的更多信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
margin: 0;
padding: 0;
}
@media (min-width: 992px) {
.center.navbar .nav,
.center.navbar .nav > li {
float: none;
display: inline-block;
*display: inline; /* ie7 fix */
*zoom: 1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align: center;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73