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

Question

我已经回顾了这个答案,它将帮助我完成我的最终目标(通过调整CSS),但我的问题是关于bootstrap为我们提供的组件和样式.

问题:下拉按钮按照要求对齐,但下拉菜单未对齐.尝试调整窗口大小以验证小型设备,平板电脑尺寸.

通过修改更改列数col-sm-12也有一点帮助,但不对齐仍然存在于小型设备上.

这是最小的,完整的和可验证的:JsFiddle示例

<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/#horizo​​ntal-alignment

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

问题:

1. 为什么以上类不适用于下拉菜单,只适用于下拉按钮？
2. 是否有任何有用的Bootstrap 4样式类可以解决这个问题？

Answer 1

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

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

更新了小提琴