Question

我正在研究MVC应用程序，我的问题在于Navbar，它的主要部分是垂直显示而不是水平显示，如果有人可以提供帮助，请提前告诉我我要做的事情;这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title Gestion Phosphate</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    @*<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />*@
    <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />

</head>
<body>

    <! --NAVBAR-->
    <div class="bloc-principal">
        <nav class="navbar navbar-default navbar-fixed-top text-info">
            <div class="container-fluid ">

                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">

                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="~/Home" class="navbar-brand"><img src="~/Images/Logo.png" class="logo-sieze img-rounded" /></a>
                </div>

                <div id="mynavbar" class="collapse navbar-collapse ">

                    <ul class="nav navbar-nav ">

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" id="mydropdown" data-toggle="dropdown">Réception <span class="caret"></span></a>
                            <ul aria-labelledby="dropdown" class="dropdown-menu">
                                <li><a href="~/Réception_Camions/Index"> Par camions</a></li>
                                <li><a href="~/Réception_trains/Index"> Par trains</a></li>
                            </ul>
                        </li>
                        <li><a href="~/Consommations/Index">Consommation</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" id="mydropdown" data-toggle="dropdown">
                                Transferts et Ventes<span class="caret"></span>
                            </a>
                            <ul aria-labelledby="dropdown" class="dropdown-menu">
                                <li><a href="~/Transferts/Index"> Transferts</a></li>
                                <li><a href="~/Export/Index"> export</a></li>
                            </ul>
                        </li>

                        <li>@Html.ActionLink("Suivi personnels", "Contact", "Home")</li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right ">

                        <li> <a href="@Url.Action("LogOut","Login") "> <i class="glyphicon glyphicon-user "></i> LogOut</a></li>
                        <li> <h5 style="color:yellow; position:relative;display:block;height:100px;padding-top:8px;padding-right:inherit"> Nom d'utilisateur: @Session["userName"].ToString()</h5></li>
                    </ul>
                </div>


            </div>
        </nav>
    </div>



    <div class="container ">
        <div class="row">
            @RenderBody()
        </div>


    </div>

    <footer>
        <center>   <h5>&copy; @DateTime.Now.Year - My ASP.NET Application</h5></center>
    </footer>
    <script src="~/Scripts/jquery-3.0.0.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="~/Scripts/notify.min.js"></script>

    @RenderSection("scripts", required: false)

</body>
</html>

这是我的CSS代码：

.navbar-default {
    background-color: forestgreen;
    border-color: darkgreen;
    margin-left: inherit;
    font-weight: bold;

}

/*body {
    margin: 0;
    font: 14px/1.5 verdana, arial, helvetica, sans-serif;
}*/

#mydropdown {
    background-color: forestgreen;
}

.dropdown ul li {
    background-color: forestgreen;
    color: blue;
    width: auto;
}   

.navbar-default .navbar-nav > li > a {
    color: #e7e7e7;      

}    
    .navbar-default .navbar-nav > li > a:hover {
        color: blue;
    }

.navbar {
    text-align: justify;

    display:block;
    height: 60px;
    padding-top: 10px;
}
.container {
        max-width:1200px;

    }
.logo-sieze {
    width: 100px;
    height: 60px;
    margin-top: -25px;
    margin-left: -1300px;
    position:fixed;
}

我正在研究MVC应用程序，我的问题在于Navbar，它的主要部分是垂直显示而不是水平显示，如果有人可以提供帮助，请提前告诉我我要做的事情; 提前谢谢:)。

Navbar组件垂直显示

0 个答案: