使用 yamm.css 引导全角子菜单

Posted 2023-03-05

【中文标题】使用 yamm.css 引导全角子菜单

【英文标题】：Bootstrap full width sub menu using yamm.css

【发布时间】：2014-11-18 23:44:09

【问题描述】：

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

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

这是我的代码：

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

如果你展开屏幕然后点击带有子菜单的链接，你会看到我需要跨越屏幕的整个宽度并且链接在 1200px 的容器内居中

希望你能帮忙，

   <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>

干杯

【参考方案1】：

首先，您需要将下拉菜单设置为 100% 宽度并将其一直放在左侧。

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

要做到这一点，.container 不能有它现在拥有的position: relative，否则下拉菜单将始终仅位于容器的左边界。所以：

.yamm .container 
    position: static;

然后，您需要确保下拉菜单的内部只有它们需要的宽度，并将它们居中。您可以通过将其设置为display: inline-block 来完成此操作。现在它只需要它需要的宽度而不是整个页面宽度。但是，它排在左侧，因此在 .dropdown-menu 中添加 text-align: center 以使内容居中。

最终结果：

.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/

【讨论】：

只是一个快速的，当您打开子菜单时，如何使向上箭头指向主链接？使用CSS：之前？我有点让它工作但是当我调整屏幕大小时它会移动，当我尝试位置时： 上的相对它会弄乱整个菜单？有任何想法吗？干杯

好吧，既然菜单现在是相对于屏幕而不是顶部菜单定位的，它永远不知道箭头应该放在哪里。而是在下拉列表中设置它，将其设置在列表项.dropdown.open::before

当我取消左侧定位并使用 margin-left 15px 时似乎可以工作，再次感谢！