html - Bootstrap 子菜单拉伸(stretch)全屏并覆盖整个页面

Question

我做了一个 JSFiddle来说明我现在所拥有的。请在这里查看我的代码:

我的一些 CSS 片段代码:

.subnav {
    display: none;
    position: absolute;
    //top: 58px;
    background: #dfe6e8;
    padding: 24px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}
.subnav li {
    margin-right: 0px !important;
    min-width: 142px;
}
.subnav li a {
    padding-bottom: 0px !important;
    margin-bottom: 16px;
}
.subnav li:last-child a {
    margin-bottom: 0px;
}
.has-dropdown:hover .subnav {
    display: block;
}

我在让我的 UL 拉伸(stretch)全屏时遇到问题。以下是我要实现的目标:

任何帮助将不胜感激

Answer 1

要实现这一点，您必须对结构和 CSS 进行少量更改。我编辑了你的 fiddle 并对导航进行了一些更改。

HTML:

   <div class="nav-container">
            <nav class="top-bar">
                <div class="container-fluid">
                    <div class="row nav-menu">
                        <div class="col-xs-12 columns">
                            <a class="navbar-brand" href="index.html"><img alt="Logo" class="logo logo-light" src="img/logo-light.png"> <img alt="Logo" class="logo logo-dark" src="http://www.subcablenews.com/links/images2/telenor.gif"></a>
                            <ul class="menu navbar-right">
                                <li>
                                    <a href="#">ABOUT</a>
                                </li>
                                <li class="has-dropdown">
                                    <a href="#">PROGRAMMES</a>
                                    <ul class="subnav">
                                        <li>
                                            <a href="about.html">Programme 1</a>
                                        </li>
                                        <li>
                                            <a href="about-2.html">Programme 2</a>
                                        </li>
                                        <li>
                                            <a href="services.html">Programme 3</a>
                                        </li>
                                        <li>
                                            <a href="services-2.html">Programme 4</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="has-dropdown">
                                    <a href="#">PROJECTS</a>
                                    <div class="subnav subnav-halfwidth fullwidth">
                                        <div class="col-sm-4">
                                            <h6 class="alt-font">Project Lists</h6>
                                            <ul class="subnav subnav-halfwidth">
                                                <li>
                                                    <a href="blog-masonry.html">Project 1</a>
                                                </li>
                                                <li>
                                                    <a href="blog-masonry-sidebar.html">Project 2</a>
                                                </li>
                                                <li>
                                                    <a href="blog.html">Project 3</a>
                                                </li>
                                                <li>
                                                    <a href="blog-large-image.html">Project 4</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-4">
                                        <h6 class="alt-font">Project Lists 2</h6><img alt="Logo" class="logo" src="http://www.subcablenews.com/links/images2/telenor.gif"></div>
                                        <div class="col-sm-4">
                                        <h6 class="alt-font">Project Lists 2</h6><img alt="Logo" class="logo" src="http://www.subcablenews.com/links/images2/telenor.gif"></div>
                                    </div>
                                </li>
                                <li class="has-dropdown">
                                    <a href="#">MEDIA</a>
                                    <ul class="subnav">
                                        <li>
                                            <a href="projects.html">Media 1</a>
                                        </li>
                                        <li>
                                            <a href="projects-2.html">Media 2</a>
                                        </li>
                                        <li>
                                            <a href="project-single-2.html">Media 3</a>
                                        </li>
                                        <li>
                                            <a href="project-single.html">Media 4</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">CONTACT</a>
                                </li>
                            </ul>
                            <ul class="social-icons text-right">
                                <li>
                                    <a href="#"><i class="icon social_twitter"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="icon social_facebook"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="icon social_instagram"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div><!--end of row-->
                    <div class="mobile-toggle">
                        <i class="icon icon_menu"></i>
                    </div>
                </div><!--end of container-->
            </nav>
        </div>

额外的CSS:

.subnav.fullwidth{
    position: absolute;
    right: -15px;
    top: 58px;
    width: 100vw;
    background: #F6F4F4;
    padding: 48px 64px 48px;
    box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(113,111,111,.7);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
    /* box-shadow: 1px 2px 5px #7D7D7D; */
}
.row{margin:0}
.top-bar .logo {
    width: 150px;
}
.subnav li{float:none; display: block;}

这里是 Updated Fiddle .确保您也检查了 html。因为我也做了一些改变。 Read this更好地了解引导导航。希望这对你有帮助。