Question

我正在使用bootstrap创建导航菜单。此导航菜单是为我的MVC 5应用程序构建的。 Admin菜单需要根据对齐方式进行修复。如果您注意到Admin菜单，其gyphicon图像未与其他菜单项对齐。我已经将菜单项更改为使用html.action链接，因为这是在MVC中实现导航链接的推荐方法。

导航菜单

HTML

<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="#"><span class="glyphicon glyphicon glyphicon-home" aria-hidden="true"></span><p>Home</p></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></a></li>
                        <li class="hideli"><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span>@Html.ActionLink("Admin", "Team", "Admin", null, null)  </li>
                        <li><a href="#"><span class="glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </header>

CSS

.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-search select {
    position: relative;
    left: 84px;
}


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

.nav > li {
    background-color: white;
}

.nav > li a:hover > .glyphicon {
    color: #009ddc;
}


.nav li:hover p {
    color: #009ddc;
}

.hideli {

    padding-right: 200px;
}

在页面加载时呈现的元素

Answer 1

请替换代码

<li class="hideli"><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span>@Html.ActionLink("Admin", "Team", "Admin", null, null)  </li>

带

<li class="hideli"><a><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>@Html.ActionLink("Admin", "Team", "Admin", null, null) </p></a> </li>

导航菜单未对齐

1 个答案: