Question

enter image description here 我正在使用此Html / css和菜单（bootstrap nav），它在小屏幕/移动设备上始终是水平的。我想要它/需要它是vertical.i＆＃39; m使用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

只需添加课程nav-stacked

即可

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

您还有navbar-right两次..删除

Answer 2

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

Answer 3

默认情况下，

Bootstrap导航链接堆叠在一起。我最好的猜测是，您呈现的HTML在列表项中没有锚点。 Bootstrap使用锚点作为CSS目标，而不是列表项。

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

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

<强> Demo

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

3 个答案: