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

时间:2017-06-05 12:35:32

标签: css twitter-bootstrap bootstrap-4

我已经回顾了这个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-centerhttps://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment

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

问题

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

1 个答案:

答案 0 :(得分:8)

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

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

Updated fiddle