跨度DIV网页的100%宽度

Question

我的网页上有一个"服务"链接，点击后会显示一个子菜单。我想跨越这个子菜单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>

非常感谢

Answer 1

也许你可以在css中使用vw单元作为".下拉菜单"，如下所示：

.dropdown-menu{
  min-width: 100vw;
}

我让你在这里检查兼容性http://caniuse.com/#feat=viewport-单位。

Answer 2

您必须为下拉菜单及其所有父菜单提供100%的宽度。但服务链接也将有完整的。

.navbar-nav
{
    width: 100%;
}
.dropdown{
 width: 100%
}
.dropdown-menu{
 width: 100%
}

我更新了你的小提琴http://jsfiddle.net/19y4qnkx/4/

编辑：刚刚看到这打破了小屏幕的风格。以下是最新的媒体查询http://jsfiddle.net/19y4qnkx/6/

Answer 3

我不知道我做对了吗，甚至不知道我是否接近它，因为更改正在应用的Bootstrap css样式非常棘手。然而，我将DIV:<div class="yamm-content">更改为在以下fasthion:<div class="yamm-content test"> 中使用css类'test'

下面是css类测试：

.test {
    width: 100%;
    background-color: yellow;
}

Fiddle

现在，当您展开下拉菜单时，子菜单的背景将显示为黄色。"服务"菜单文本周围有红色边框，因此仍需要进行微调。就像它所说的那样，之后更改Bootstrap CSS样式很难。我不知道这是否可以通过自己的Bootstrap定制来解决。