如何在徽标和子标题下放置全宽菜单

时间:2014-08-14 08:17:26

标签: html css twitter-bootstrap

我将Bootstrap 3与经典的aspx页面结合使用,我希望完成如下所示的内容(使用Bootstrap或不使用):

enter image description here

为此,我有以下代码:

<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-->

效果是该品牌位于左侧,菜单位于右侧,如下所示:

enter image description here

如何以导航栏位于品牌和子标题下方的方式设置此样式?没有必要使用Bootstrap。

1 个答案:

答案 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>

希望这有帮助。