Question

我正在使用yamm.css作为我的超级子菜单。

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

这是我的代码：

如果你展开屏幕，然后点击子菜单的链接，你会看到我需要跨越整个屏幕宽度和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>

干杯

Answer 1

首先，您需要将下拉列表设置为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/

使用yamm.css的Bootstrap全宽子菜单

1 个答案: