Question

我在MVC布局视图上实现了bootstrap导航栏，崩溃菜单似乎突然起作用了。无法发现问题。它以前工作过。不确定是不是因为某些css规则搞砸了

<!DOCTYPE html>
<html>
<head>

    <title>@ViewBag.Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0,user-scalable=no">
    @Styles.Render("~/Content/kendo/css")
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/custom/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body >

    <header>
        <nav class="navbar navbar-default">
            <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" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#"><img src="~/Images/Computacenter.png" /> </a>
                    <h1>MCR</h1>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right text-center">
                        <li><a href="@Url.Action("Team", "Admin")"><span class="glyphicon glyphicon glyphicon-home" aria-hidden="true"></span><p>Home</p></a></li>
                        <li><a href="@Url.Action("Team", "Admin")"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></a></li>
                        <li><a href="@Url.Action("Team", "Admin")"><span class="glyphicon glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></a></li>
                        <li><a href="@Url.Action("Team", "Admin")"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></a></li>
                        <li class="hideli"><a href="@Url.Action("Team", "Admin")"><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>Admin</p></a></li>
                        <li><a href="@Url.Action("Team", "Admin")"><span class="glyphicon glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </header>

    <div id="body">
        @RenderBody()
    </div>


     @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/kendo")
    @RenderSection("scripts", required: false)

</body>
</html>

CSS

html, body {
    font-family: Helvetica, sans-serif, sans-serif;
    font-size: 13px;
    border-top: none;
    background-image: url('../../Images/iNeed__waterfall_BG.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    min-height: 100vh;
}

#body {
    bottom: 0px;
    left: 0;
    position: absolute;
    right: 0;
    top: 82px;
    background: transparent;
}

.navbar {
    padding: 0;
    background-color: #fff;
}

.navbar-header img {
    max-height: 55px;
    max-width: 55px;
    padding-top: 25px;
    margin-right: 5px;
    float: left;
}

.navbar-header h1 {
    float: left;
    color: darkblue;
}


/*.navbar-nav > li > a {
    padding-top:0px;
}*/


.nav navbar-nav navbar-right {
    text-align: center;
}

bootstrap 3导航栏崩溃无法正常工作

0 个答案: