Question

我在我的网络应用程序中使用bootstrap，但我的导航栏有问题，我的代码在这里：

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" rel="home" href="/" title="Backoffice Wenco"><img style="max-width:50px; margin-top: -7px;" src="http://www.mekano.com/mkn2009/pics/logos_manufacturas/logo_wenco.gif"></a>
            <span class="navbar-brand">Gestión de Horas</span>
        </div>
        <div class="navbar-collapse collapse" id="mainNavBar">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Inicio", "Index", "Home")</li>
                @if (userAccessService.IsInAction(user.SamAccountName, appId, "Project"))
                {
                    var action = user.ApplicationRoles.First(i => i.Application.Alias.Equals(appId)).Actions.FirstOrDefault(a => a.Controller == "Project");
                    <li>@Html.ActionLink(action.Caption, "Index", "Project")</li>
                }
                @if (userAccessService.IsInAction(user.SamAccountName, appId, "Project", "EditUsers"))
                {
                    var action = user.ApplicationRoles.First(i => i.Application.Alias.Equals(appId)).Actions.FirstOrDefault(a => a.Controller == "Project" && a.Accion == "EditUsers");
                    <li>@Html.ActionLink(action.Caption, "EditUsers", "Project")</li>
                }
                @if (userAccessService.IsInAction(user.SamAccountName, appId, "Report"))
                {
                    var action = user.ApplicationRoles.First(i => i.Application.Alias.Equals(appId)).Actions.FirstOrDefault(a => a.Controller == "Report");
                    <li>@Html.ActionLink(action.Caption, "UserProjectHours", "Report")</li>
                }
                @if (userAccessService.IsInAction(user.SamAccountName, appId, "WorkingDay", "Index"))
                {
                    var action = user.ApplicationRoles.First(i => i.Application.Alias.Equals(appId)).Actions.FirstOrDefault(a => a.Controller == "WorkingDay" && a.Accion == "Index");
                    <li>@Html.ActionLink(action.Caption, "Index", "WorkingDay")</li>
                }
                @if (userAccessService.IsInAction(user.SamAccountName, appId, "WorkingDay", "IndexAdmin"))
                {
                    var action = user.ApplicationRoles.First(i => i.Application.Alias.Equals(appId)).Actions.FirstOrDefault(a => a.Controller == "WorkingDay" && a.Accion == "IndexAdmin");
                    <li>@Html.ActionLink(action.Caption, "Index", "WorkingDay")</li>
                }
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><p class="navbar-text">@user.GivenName</p></li>
                <li>@Html.ActionLink("Cerrar Sesión", "LogOff", "Account")</li>
            </ul>
        </div>
    </div>
</nav>

我有一个默认导航栏和一个右侧导航栏，但崩溃效果不是很好，这里有捕获：

enter image description here

有谁知道我该怎么做才能避免这个错误？

更新我想解释一下我的问题。我想一直在我的导航栏中一行，如果元素不能在同一行，它应该显示菜单（如最后一张图片）

Answer 1

问题是你的导航栏中有很多链接...这个解决方案会改变“grid-float-breakpoint”...默认情况下它会破坏小屏幕设备......你需要改变它适用于中型屏幕设备......如果您使用sass或更少，您可以像这样更改变量

@ grid-float-breakpoint：@ screen-md-min

检查bootstrap的自定义页面并查找“grid-float-breakpoint”

Answer 2

首先处理@ grid-float-breakpoint等是......中的巨大痛苦。

这可能对您有用，它是一个jQuery resize函数，您可以在其中设置断点以折叠菜单。根据需要编辑widow.width。将内部脚本标记放在页面底部。 HTH！

$(window).resize(function() {
if ($(window).width() < 768) {
    $('.navbar-collapse a').click(function(e) {

        $('.navbar-collapse').collapse('toggle');
    });
    }
 });

Bootstrap导航栏不会以适当的方式折叠

2 个答案: