- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在为我的大型子菜单使用 yamm.css。
我要求子菜单跨越整个页面的整个宽度,然后链接在容器内居中。
这是我的代码:
如果你展开屏幕然后点击带有子菜单的链接,你会看到我需要得到横跨整个屏幕宽度的链接以及在 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/
最近我开始使用 bootstrap 3,但在阅读文档后无法弄清楚为什么导航栏和下一部分不能在它们自己的 div 上分开。 在这种情况下,我使用 yamm3 作为 megamenu,接下来的部分是 3
我目前正在为慈善机构重新设计一个网站,使用带有 Bootstrap 的 YAMM Navbar,我有一个奇怪的情况,如果我只在 Bootply 上测试 Navbar 和 CSS 代码,它工作得很好——
我尝试使用 bootstrapjs yaml 菜单。如何在浏览器窗口调整大小时假装 Logo 和菜单项变成两行?我希望在调整窗口大小以缩小时右上角的“汉堡包”出现得更早。
我正在使用 Bootstrap 3 的 Yamm mega 菜单,需要一个多下拉菜单作为网格工作。 第一个下拉部分位于前 4 列网格内,然后下拉菜单的后半部分应进入第二个 4 列网格,最后第三个进入最
我正在为我的大型子菜单使用 yamm.css。 我要求子菜单跨越整个页面的整个宽度,然后链接在容器内居中。 这是我的代码: http://jsfiddle.net/DHQfz/17/ 如果你展开屏幕然
我正在使用 YAMM 为 Bootstrap 创建一个大型菜单,但我不知道如何使菜单在鼠标悬停/悬停时出现。目前它仅在点击时出现。 github demo jsFiddle
我正在使用 Yamm 3 mega 菜单进行 Bootstrap 。 我在使菜单在容器外部的整个屏幕上全宽显示时遇到问题,然后将菜单选项居中放置在中间。 例如,在下面的链接中,单击 PICTURES
我使用 yamm.css 在悬停时使用以下代码制作 super 导航子菜单显示: ul.nav li.dropdown:hover > ul.dropdown-menu { display:
我是一名优秀的程序员,十分优秀!