Question

我已经回顾了这个answer，它将帮助我实现我的最终目标（通过调整CSS）但我的问题是关于bootstrap为我们提供的组件和样式。

问题：下拉按钮根据需要对齐，但下拉菜单未对齐。尝试调整窗口大小以验证小型设备，平板电脑尺寸。

通过修改col-sm-12来更改列数也会有所帮助，但错位仍然存在于小型设备上。

这是最小，完整和可验证：JsFiddle Example

<div class="container-fluid">
        <div class="row justify-content-center text-center">
            <div class="col-sm-12 align-self-center">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Select Category
                    </button>
                    <div class="dropdown-menu"
                         aria-labelledby="dropdownMenuButton">


                            <a class="dropdown-item" href="#">Category1</a>
                            <a class="dropdown-item" href="#">Category2</a>
                            <a class="dropdown-item" href="#">Category3</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

允许我们居中对齐的两个类 -

justify-content-center： https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment

text-center：https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment

问题：

为什么上述类不适用于下拉菜单，只适用于下拉按钮？
我是否有任何有用的Bootstrap 4样式类可以修复错位？

Answer 1

这是因为您的下拉菜单绝对定位 - 您需要覆盖它的样式并将其放置在中心而不是左侧：

.justify-content-center .dropdown-menu {
   left: 50%;
   transform: translateX(-50%);
}

Updated fiddle

中心对齐Bootstrap 4中的Dropdown组件无法正常工作

1 个答案: