如何使nav-pills像navbar一样崩溃

时间:2016-03-20 16:16:13

标签: asp.net-mvc twitter-bootstrap-3

我有一个nav-pills菜单,当它崩溃时它是水平的。当它崩溃时,我想要像导航栏这样的菜单。我在互联网上搜索,唯一的解决方案是制作菜单,我不认为这是最好的解决方案。

                               <div class="navbar">
                                    <button type="button" class="navbar-toggle btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".navbar-collapse">
                                        NAVIGATION <span class="icon-chevron-down icon-white"></span>
                                    </button>

                                    <div class="navbar-collapse collapse" style="background-color:deeppink;">
                                        <ul class="nav navbar ddmenu">
                                            <li class="dropdown active">@Html.ActionLink("Home", "Index", "Home")</li>

                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Transport <b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                    <li>@Html.ActionLink("Medicin", "Medicin", "Home")</li>
                                                    <li>@Html.ActionLink("Køl / Varme / Frost", "Temperaturkontrolleret", "Home")</li>
                                                    <li>@Html.ActionLink("ADR", "ADR", "Home")</li>
                                                    <li>@Html.ActionLink("Express", "Express", "Home")</li>
                                                    <li>@Html.ActionLink("Flytninger", "Flytninger", "Home")</li>
                                                    <li>@Html.ActionLink("SLV", "SLV", "Home")</li>
                                                    <li>@Html.ActionLink("Dyr", "Dyr", "Home")</li>
                                                    <li>@Html.ActionLink("Håndvåben", "Weapons", "Home")</li>
                                                    <li>@Html.ActionLink("England Tur/Retur", "TurRetur", "Home")</li>
                                                </ul>
                                            </li>

                                            <li class="dropdown">@Html.ActionLink("Priser", "Priser", "Home")</li>
                                            <li class="dropdown">@Html.ActionLink("Nyheder", "Nyheder", "Home")</li>
                                            <li class="dropdown">@Html.ActionLink("Kontakt", "Kontakt", "Home")</li>
                                            <li class="dropdown">@Html.ActionLink("Job", "Vognmand", "Home")</li>
                                            <li>
                                                <a class="hideButtonDk" href="@Url.Action("Change", "Home", new { Lang = "da"})">
                                                    <img src="@Url.Content("~/Images/icon_uk.png")" />
                                                </a>
                                            </li>
                                        </ul>

                                    </div>

                                </div>

希望有人可以帮我解决这个问题

1 个答案:

答案 0 :(得分:0)

我用这个解决了它

 .nav-pills.ddmenu > li{
   width: 100%;
}

并在下拉菜单中

.nav-pills > li > .dropdown-menu{
    height:auto;
    width:98%;
}