我有一个'服务'我的网页上的链接,点击时显示子菜单。我想跨越这个子菜单100%的页面宽度。
这是可能的吗?如何更改我的代码以允许此操作?
小提琴: http://jsfiddle.net/19y4qnkx/
我正在使用Bootstrap。
这是我的HTML:
<ul class="nav navbar-nav navbar-left ">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Services </a>
<ul class="dropdown-menu">
<li><div class="yamm-content"> <ul class="nav navbar-nav navbar-left"> <li><a href="#">Bla</a></li> <li><a href="#">Bla</a></li> <li><a href="#">Bla</a></li> <li><a href="#">Bla</a></li> </ul></div>
</li>
</ul>
</li>
</ul>
非常感谢
答案 0 :(得分:2)
也许你可以在你的css中使用vw单位为你的“.dropdown-menu”:
.dropdown-menu{
min-width: 100vw;
}
我在这里查看兼容性http://caniuse.com/#feat=viewport-units。
答案 1 :(得分:0)
您必须为下拉菜单及其所有父母提供100%的宽度。但是服务链接也将充满。
.navbar-nav
{
width: 100%;
}
.dropdown{
width: 100%
}
.dropdown-menu{
width: 100%
}
我更新了你的小提琴http://jsfiddle.net/19y4qnkx/4/
编辑:刚刚看到这打破了小屏幕上的风格。这是媒体查询http://jsfiddle.net/19y4qnkx/6/
的更新小提琴答案 2 :(得分:0)
我不知道我做对了,甚至接近它,因为改变正在应用的Bootstrap css样式非常棘手。但是,我更改了DIV:<div class="yamm-content">
以使用css类'test'
以及以下fasthion:<div class="yamm-content test">
以下是css类测试:
.test {
width: 100%;
background-color: yellow;
}
现在,当您展开下拉菜单时,子菜单的背景将显示为黄色。 “服务”菜单文本周围有红色边框,因此仍有微调。好吧,就像它说后来改变Bootstrap CSS样式一样棘手。我不知道这是否可以通过自己的Bootstrap customization来解决。