html - 使用 Bootstrap 对齐水平下拉菜单

Question

我正在尝试获得一个水平对齐的下拉菜单，但在对齐方面存在一些问题。

这是我的 fiddle

https://jsfiddle.net/jqf66dbp/

我基本上已将以下更改添加到下拉菜单的 css

  .dropdown-menu {
    padding: 15px;
    min-width: 500px;
  }

  .navbar-right .dropdown-menu {
    right: inherit;
  }

基本上，当您点击每个菜单项时，下拉框会向右移动。有没有办法让它固定在与第一个菜单项相同的位置？

我要解决的第二个问题是下拉列表中的元素。对于我的 fiddle 示例，我使一个元素比其余元素长“更新协作”您会注意到该元素移动了所有其他元素并弄乱了对齐方式。我怎样才能使所有元素更好地对齐并在一行中包含“更新协作”。

感谢您的帮助!

Answer 1

这是您第一个问题的更新 fiddle 。您可以在下面的 CSS 类中调整保管箱的大小，我已将其设置为 100%。

更新 fiddle :- https://jsfiddle.net/jqf66dbp/3/

.dropdown-menu {
    padding: 15px;
    /* min-width: 500px; */
    width: 100%;
    position: fixed;
    top: 48px;
    z-index: 1000;
    text-align: left;
    padding: 15px;
    margin: 0 auto;
    left:0px;
}

您能否详细说明第二个问题？因为在上面的 css 更改之后我没有看到任何问题