Question

我正在尝试获得一个水平对齐的下拉菜单，以及对齐问题。

这是我的小提琴

我基本上已将以下更改添加到下拉列表的CSS中

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

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

基本上，当您点击每个菜单项时，下拉框会向右移动。是否有办法使它与第一个菜单项保持相同的位置？

我要解决的第二个问题是下拉列表中的项目。对于我的小提琴示例，我做了一个项目比其余的更新“更新协作”你会注意到这个项目会移动所有其他项目并弄乱对齐。如何使所有项目更好地对齐，并在一行中“更新协作”。

感谢您的帮助！

Answer 1

这是您第一个问题的更新小提琴。您可以在下面的CSS类中调整Dropbox的大小，我将其设为100％。

更新小提琴： - 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更改后我没有看到任何问题

使用Bootstrap对齐水平下拉菜单

1 个答案: