gpt4 book ai didi

html - 使用 yamm.css Bootstrap 全宽子菜单

转载 作者:太空狗 更新时间:2023-10-29 15:11:15 24 4
gpt4 key购买 nike

我正在为我的大型子菜单使用 yamm.css。

我要求子菜单跨越整个页面的整个宽度,然后链接在容器内居中。

这是我的代码:

http://jsfiddle.net/DHQfz/17/

如果你展开屏幕然后点击带有子菜单的链接,你会看到我需要得到横跨整个屏幕宽度的链接以及在 1200 像素容器内居中的链接

希望能帮到你

   <li class="dropdown yamm-fw buyingNav">
<a href="#" data-toggle="dropdown" class="dropdown-toggle subMenu">Link sub nav <b class="caret"></b>
</a><ul class="dropdown-menu"> </ul>
</li>

干杯

最佳答案

首先,您需要将下拉菜单设置为 100% 宽度并将其一直定位到左侧。

.yamm .container .dropdown-menu {
left: 0;
width: 100%;
}

要做到这一点,.container 不能有它现在拥有的 position: relative,否则下拉列表将始终只定位到容器的左边界。所以:

.yamm .container {
position: static;
}

然后您需要确保下拉菜单的内部宽度只达到它们需要的宽度,并将它们居中。您可以通过将其设置为 display: inline-block 来实现。现在它只会占用所需的宽度,而不是整个页面的宽度。但是,它向左排列,因此将 text-align: center 添加到 .dropdown-menu 以使内容居中。

最终结果:

.yamm .container {
position: static;
}

.yamm .container .dropdown-menu {
left: 0;
text-align: center;
width: 100%;
}

.yamm .dropdown-menu > li {
display: inline-block;
}

工作 jsFiddle:http://jsfiddle.net/DHQfz/18/

关于html - 使用 yamm.css Bootstrap 全宽子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26017616/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com