Bootstrap 4 响应式导航栏对齐

Question

我一直在使用 Bootstrap 4。我遇到了菜单未对齐的问题。

这个问题的例子在这里：http://www.bootply.com/xWjxonsmiz

示例中存在三个问题（执行时可以看到）

1) 第一个问题（sub-option-2 没有居中对齐）：

2) 第二个问题（当我调整屏幕大小时，它没有对齐）

3) 第三个问题（当我调整屏幕大小时，'选项 2' 出现了一些我没有设置与其余元素相同的填充）

错在哪里？

谢谢

Answer 1

1) 第一个问题（sub-option-2 不居中对齐）：

下拉菜单中的项目不应包含 .nav-link 和 .nav-item 类（这些类为任何 na.nav-link + .nav-link 设置左边距）。： 在_navbar.scss：

.nav-link
 + .nav-link {
      margin-left: 1rem;
    }
}

上述情况也可能导致您的第三个问题。我不明白你的第二个问题，但我也想知道 BS4 是否已经支持导航栏下拉菜单？

更新 另请阅读 Bootstrap 4’s responsive navbars 关于导航栏下拉菜单和对齐的导航栏项目。有关导航栏下拉菜单的示例，另请参阅 https://github.com/bassjobsen/responsive-navbar-dropdowns。