twitter-bootstrap Bootstrap 菜单 (nav) 水平折叠而不是垂直折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28720731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap menu (nav) collapse horizontally instead of vertical
提问by Danny
i'm using this Html /css for and the menu(bootstrap nav ) and it is always horizontal on a small screen / mobile device. that I want it / need it to be vertical.i'm using bootstrap 3.2
我正在使用这个 Html /css 和菜单（引导导航），它在小屏幕/移动设备上总是水平的。我想要它/需要它是垂直的。我正在使用引导程序 3.2
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="home/index" class="navbar-brand">
<img src="../../Images/Logo.gif" alt="" class=" left img-rounded img-responsive noborder " />
</a>
</div>
<div class="collapse navbar-collapse ">
<ul class="nav navbar-right nav-pills navbar-right ">
<li>@Html.ActionLink("1", "Index", "ContactUs")</li>
<li>@Html.ActionLink("2", "Allpictuers", "Home")</li>
<li>@Html.ActionLink("3", "Index", "Courses")</li>
<li>@Html.ActionLink("4", "Events", "Home")</li>
<li>@Html.ActionLink("5", "OurStafMembers", "Home")</li>
<li>@Html.ActionLink("6", "Index", "Abouts")</li>
<li>@Html.ActionLink("7", "Index", "Home")</li>
<li>@Html.ActionLink("8", "Index", "English")</li>
@*<li>>@Html.ActionLink("Thisis _Layout", "Index", "English")</li>*@
@if (User.Identity.IsAuthenticated)
{
<li> @Html.Partial("_LoginPartial")</li>
<li>@Html.ActionLink("Admin", "Index", "admin")</li>
}
</ul>
</div>
This is the render Html:
这是渲染HTML：
/ ...
/ ...
<ul class="nav navbar-right nav-pills ">
<li><a href="/ContactUs">1</a></li>
<li><a href="/Home/Allpictuers">2</a></li>
<li><a href="/Courses">3</a></li>
<li><a href="/Home/Events">4</a></li>
<li><a href="/Home/OurStafMembers">5</a></li>
<li><a href="/Abouts">6</a></li>
<li><a href="/">7</a></li>
<li><a href="/English">8</a></li>
</ul>
</div>
</div>
</div>
回答by Herman Nz
UPDATED:(Use <ul class="nav navbar-nav">instead of nav-pills and friends.)
更新：（使用<ul class="nav navbar-nav">而不是导航药丸和朋友。）
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#"><img src=""/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="padding-right:2%;">
<li><a href="#">1</a>
</li>
<li><a href="#">2</a>
</li>
<li><a href="#">3</a>
</li>
<li><a href="#">4</a>
</li>
<li><a href="#">5</a>
</li>
<li><a href="#">6</a>
</li>
<li><a href="#">7</a>
</li>
</ul>
回答by nolawi
Just add the class nav-stacked
只需添加类 nav-stacked
<ul class="nav navbar-right nav-pills nav-stacked">
...
</ul>
you also have navbar-righttwice.. remove that
你也有navbar-right两次..删除
回答by isherwood
Bootstrap nav links are stacked by default for mobile. My best guess is that your rendered HTML doesn't have anchors inside the list items. Bootstrap uses the anchors as CSS targets, not the list items.
Bootstrap 导航链接默认为移动设备堆叠。我最好的猜测是您呈现的 HTML 在列表项中没有锚点。Bootstrap 使用锚点作为 CSS 目标，而不是列表项。
If your output looks like this it will work as expected with no changes:
如果您的输出看起来像这样，它将按预期工作，无需任何更改：
<li><a href="#">Link text</a></li>
