我做了一个
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全屏拉伸.以下是我正在尝试实现的内容,如下所示：
任何帮助,将不胜感激
最佳答案 要实现这一点,您必须进行一些结构和css更改.我编辑了你的小提琴并对导航做了一些改动.
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更好地了解bootstrap导航.希望这对你有所帮助.
