Bootstrap 菜单（导航）水平折叠而不是垂直折叠

Question

我正在使用这个 Html /css 和菜单（bootstrap 导航），它在小屏幕/移动设备上总是水平的.我想要它/需要它 vertical.i 使用 bootstrap 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>

这是渲染图 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>

Answer 1

只需添加 class nav-stacked

<ul class="nav navbar-right  nav-pills nav-stacked">
 ...
</ul>

你也有 navbar-right 两次..删除那个

Answer 2

Bootstrap 移动设备的导航链接默认是堆叠的。我最好的猜测是你呈现的 HTML 在列表项中没有锚点。 Bootstrap 使用锚点作为 CSS 目标，而不是列表项。

如果您的输出看起来像这样，它将按预期工作而无需更改：

<li><a href="#">Link text</a></li>

Demo

Answer 3

更新：（使用 <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>

Bootstrap 菜单（导航）水平折叠而不是垂直折叠

Bootstrap menu (nav) collapse horizontally instead of vertical

twitter-bootstrap

twitter-bootstrap-3