logo标签列表

引导子菜单如何占满整个屏幕并覆盖整个页面

htmlcsstwitter-bootstrap-3
4
我已经创建了一个JSFiddle来说明我目前的情况，请在此处查看我的代码：https://jsfiddle.net/8nvxzewy/1/ 以下是我的一些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）全屏展示。以下是我要实现的效果： enter image description here 任何帮助都将不胜感激。
2个回答
2
要实现这一点，您需要进行一些结构和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;}

这里是更新后的Fiddle示例。请确保您也检查了HTML代码，因为我也对它进行了一些更改。 阅读此文以更好地了解Bootstrap导航栏。希望这能帮到您。

0

这是因为父元素的宽度不是100%。您可以通过在要占用整个宽度的任何元素上使用width:100vw;来覆盖此设置。另外，请记住下次只包含与问题相关的CSS，以便帮助他人时不需要浏览整个样式表。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接