引导导航栏不appropiate方式崩溃(Bootstrap navigation bar does

2019-10-19 21:24发布

嗨,我是使用自举在我的web应用程序,但我有导航栏的一个问题,我的代码是在这里:

<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>

我有一个默认的导航栏,也是一个右侧导航栏,但崩溃效应不工作得非常好,这里的捕获:

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

更新我想解释一下我的问题。 我想有所有的时间在一行中我的导航栏,如果要素不能在同一条线上,它应该显示菜单(如最后一个图像)

Answer 1:

问题是,你有很多的导览列链接...这个解决办法是在默认情况下它的出现为小屏幕设备上更改“网格浮动断点” ......你需要将其更改为中等屏幕设备......如果乌拉圭回合使用青菜或更少你可以改变的变量是这样

@网格浮子断点:@屏幕-MD-分钟

检查引导的定制页面,并查找“网格浮动断点”



Answer 2:

首先对付@电网浮动断点等是在一个巨大的痛苦......

这可能会为你工作是一个jQuery调整功能,您可以设置断点以折叠菜单。 编辑widow.width适用。 把里面的脚本标记在你的页面的底部。 HTH!

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

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


文章来源: Bootstrap navigation bar doesn't collapse in appropiate way