我做了一个 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)全屏时遇到问题。以下是我要实现的目标:
任何帮助将不胜感激
最佳答案
要实现这一点，您必须对结构和 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更好地了解引导导航。希望这对你有帮助。
关于html - Bootstrap 子菜单拉伸(stretch)全屏并覆盖整个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40646088/