Question

我从MetroMan Bootstrap模板开始构建我的第一个Bootstrap 3站点，并遵循Pluralsight教程。我遇到一个特定的行为有困难，其中菜单显示在正文中的其他元素。当站点宽度减小到超出iPad级别时，导航将成为预期的下拉菜单，但该菜单显示在（at）RenderBody（）后面。由于宽度减小，此行为不会发生在站点中的任何其他位置。

以下是_Layout.cshtml的相关部分

    <header>
<div class="container">
    <div class="row">
    <div class="col-md-3 col-sm-4">
        <!-- Logo starts -->
        <div class="logo">
        <a href="~/Home/index"><img src="../Content/Templates/img/DJGLogo250.png" alt="Author Logo" class="navbar-brand" /></a>
        <div class="clearfix"></div>
        </div>
        <!-- Logo ends -->
    </div>
    <div class="col-md-9 col-sm-8">
        <!-- Navbar starts -->
        <div class="navi pull-right">
        <div id="ddtopmenubar" class="mattblackmenu">
            <!-- Main navigation -->
            <!-- Use the background color class in anchor tag for colorful menu -->
            <ul>
            <li><a href="~/Home/Index" class="blightblue"> <i class="icon-home"></i> Home</a></li>
            <!-- Main navigation -->
            <li>
                <a href="#" rel="ddsubmenu2" class="bred"> <i class="icon-book"></i> Author</a>
                <!-- Sub Navigation -->
                <ul id="ddsubmenu2" class="ddsubmenustyle">
                <li><a href="~/Home/About">About Damon</a></li>
                <li><a href="~/Home/AskTheAuthor">Ask Damon</a></li>
                <li><a href="~/Home/Speaking">Speaking Engagements</a></li>
                <li><a href="~/Home/Books">Books</a></li>
                </ul>
            </li>
            <li>
                <a href="#" rel="ddsubmenu2" class="bviolet"> <i class="icon-comments"></i> Interact</a>
                <!-- Sub Navigation -->
                <ul id="ddsubmenu2" class="ddsubmenustyle">
                <li><a href="~/News/News">News</a></li>
                <li><a href="~/Blog/Blog?curpos=0">Long-View Living (Blog)</a></li>
                <li><a href="~/BookEngagement/BookEngagement">Book an Engagement</a></li>
                </ul>
            </li>
            <li>
                <a href="#" rel="ddsubmenu2" class="bgreen"> <i class="icon-bookmark"></i> Extras</a>
                <!-- Sub navigation -->
                <ul id="ddsubmenu2" class="ddsubmenustyle">
                <li><a href="~/RecommendedReading/RecommendedReading">Recommended Reading</a></li>
                <li><a href="~/Home/StudyTips">Bible Study Tips</a></li>
                </ul>
            </li>
            <li><a href="~/Contact/Contact" class="bblue"> <i class="icon-envelope-alt"></i> Contact</a></li>
            </ul>
        </div>
        </div>
        <div class="navis"></div>
        <div class="clearfix"></div>
    </div>
    </div>
</div>
</header>

<div class="clearfix"></div>

<!-- Header ends -->


    @RenderBody()

如果你看左边，就在蓝天的上方，那条白色的条子就是菜单。通过在驱动这两个元素的CSS样式上设置z-index值，我能够让菜单显示在渲染体的顶部。这是一个丑陋的黑客，但确实有效。

以下是代码style.css的两个部分。

    .navis select{
    display:none;
    z-index:300;
}

 /* Parallax Slider */

.da-slider{
    margin-bottom: 0px;
    border-top: 3px solid #eee;
    border-bottom: 3px solid #eee;
    z-index:-1;
}

我必须要有一些简单的东西 - 这将允许这两个元素一个接一个地显示而不是一个在另一个之上。有什么建议吗？

Answer 1

请添加z-index：-1;对于滑块并添加z-index：9999;菜单

.da-slider{z-index:-1;}


.navis{z-index:9999;}

Bootstrap 3折叠菜单显示在渲染体

1 个答案: