我将Bootstrap 3与经典的aspx页面结合使用,我希望完成如下所示的内容(使用Bootstrap或不使用):
为此,我有以下代码:
<div class="container-fluid">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-brand">
<asp:Label ID="MainHeader" runat="server" SkinID="MainHeader" Text="OUR BRAND"></asp:Label>
</div>
<div class="navbar-form navbar-left">
<asp:Label ID="MainSubHeader" runat="server" SkinID="MainSubHeader" Text="[Sub Title]"></asp:Label>
</div>
<div class="nav navbar-nav navbar-right">
<asp:HyperLink ID="SiteLogoHyperLink" runat="server" NavigateUrl="~/Pages/Welcome.aspx" ImageUrl="[OUR LOGO]">
</asp:HyperLink>
</div>
<div style="border-top-width: 3px; border-top-style: solid;">
</div><!-- A horizontal row that I prefer to be under the brand, sub header and logo -->
<div id="divMenu">
<!-- START SITEMAP MENU-->
<asp:Menu ID="MainMenu" runat="server" DataSourceID="siteMapDS"
<StaticItemTemplate>
<%# Server.HtmlEncode((string)Eval("Text")) %>
</StaticItemTemplate>
</asp:Menu>
<asp:SiteMapDataSource ID="siteMapDS" runat="server" ShowStartingNode="False" />
</div>
<!-- END SITEMAP MENU-->
</div>
<!--navbar-->
<div class="row">
<div class="col-lg-12">
<!-- DISPLAY INFORMATION IF NECESSARY -->
</div>
</div>
<div class="row">
<div class="col-lg-12" >
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder> <!--MAIN CONTENT-->
</div>
</div>
</div><!--container-fluid-->
效果是该品牌位于左侧,菜单位于右侧,如下所示:
如何以导航栏位于品牌和子标题下方的方式设置此样式?没有必要使用Bootstrap。
答案 0 :(得分:2)
如果没有完整的代码,我无法准确定义问题,但根据您发布的图片判断,我认为这是一个浮动问题。
尝试使用此功能清除导航前的浮动:
<br style="clear:both;" />
<div id="divMenu">
<!-- START SITEMAP MENU-->
<asp:Menu ID="MainMenu" runat="server" DataSourceID="siteMapDS"
<StaticItemTemplate>
<%# Server.HtmlEncode((string)Eval("Text")) %>
</StaticItemTemplate>
</asp:Menu>
<asp:SiteMapDataSource ID="siteMapDS" runat="server" ShowStartingNode="False" />
</div>
希望这有帮助。