Question

我无法正确显示导航栏。我已经尝试了我所知道的所有尝试并对此问题进行了大量研究，但没有任何帮助。我开始认为它非常简单，我只是没有看到问题。这是我的导航栏的图片：

正如您所看到的，文本没有正确排列，底部文字非常暗。此外，阅读文本，您可以看到顶部文本应该很小，底部文本应该很大。

以下是母版页中的代码：

<body>
<form runat="server">
    <asp:ScriptManager runat="server">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="respond" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container nav-content">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle iconButton" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-left" runat="server" href="#">
                    <img class="nav-logo" src="/Content/Images/logo.png" alt="Bureau of Land Management logo"/>
                </a>
                <span class="blm">THIS SHOULD BE A SMALL NAME</span><br />
                <span class="its">THIS SHOULD BE A LARGE SLOGAN THAT WRAPS</span><br />

            </div>
            <div class="navbar-collapse collapse navbar-links">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/"><span class="navLink">Home</span></a></li>
                    <li><a runat="server" href="~/"><span class="navLink">Supervisory Safety Training</span></a></li>
                    <li><a runat="server" href="~/"><span class="navLink">Building Inspections</span></a></li>
                    <li><a runat="server" href="~/About"><span class="navLink">About</span></a></li>
                    <li><a runat="server" href="~/Contact"><span class="navLink">Contact</span></a></li>
                </ul>
                <asp:LoginView runat="server" ViewStateMode="Disabled">
                    <AnonymousTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a runat="server" href="~/Account/Register"><span class="navLink">Register</span></a></li>
                            <li><a runat="server" href="~/Account/Login">

这是CSS：

＆＃13;

.nav-logo{
	clear:left;
	float:left;
	text-align:left;
	width:112px;
	height:91px;
}
.navbar-header .blm{  /*Site name: Small navbar name */
	/*	FIRST ATTEMPT */
	text-align:left !important;
	color: #ffffff !important;
	display: block;
	line-height:0.5 !important;
	text-decoration:none !important;
	font-size: 15px !important;
}
.navbar-header .its {	/*Site slogan: Large navbar slogan */
	/* FIRST ATTEMPT */
	padding-left: 25px !important;
	text-align: left !important;
	color: #ffffff !important;
	width: 200px;
	line-height: 1.0;
	font-size: 25px;
	text-decoration: none;
	/*padding: -45px 0px 0px 125px !important;*/
}
.under-navbar{
	border-color:#9FCF6E;
	background-color: #9FCF6E;
	height:5px;
}

＆＃13;

此外，右侧的三个条形应与底部条形图的颜色相同。任何帮助将不胜感激。

带有文本的ASP.NET Bootstrap Navbar徽标

0 个答案: