Question

我有一个＆＃39;服务＆＃39;我的网页上的链接，点击时显示子菜单。我想跨越这个子菜单100％的页面宽度。

这是可能的吗？如何更改我的代码以允许此操作？

我正在使用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”：

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

我在这里查看兼容性http://caniuse.com/#feat=viewport-units。

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">以使用css类'test'以及以下fasthion：<div class="yamm-content test">

以下是css类测试：

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

Fiddle

现在，当您展开下拉菜单时，子菜单的背景将显示为黄色。 “服务”菜单文本周围有红色边框，因此仍有微调。好吧，就像它说后来改变Bootstrap CSS样式一样棘手。我不知道这是否可以通过自己的Bootstrap customization来解决。

跨度DIV 100％宽度的网页

3 个答案: