跨度DIV 100%宽度的网页

时间:2014-11-08 14:33:37

标签: javascript jquery html css twitter-bootstrap

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

非常感谢

3 个答案:

答案 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;
}

Fiddle

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