Bootstrap 4中心块无法居中

Question

我有以下引导 html 代码（它的 JSX 因此是 className，但想法是一样的）：

<div className="toggleView btn-group center-block" role="group" aria-label="Basic example">
        <button onClick={this.handleTimelineClick} type="button" className={this.state.toggleCalendar == false ? "btn btn-secondary active" : "btn btn-secondary"}>Timeline</button>
        <button onClick={this.handleCalendarClick} type="button" className={this.state.toggleCalendar == true ? "btn btn-secondary active " :"btn btn-secondary"}>Calendar</button>
 </div>

我正在尝试使用引导程序中心块或 CSS 将这段代码居中，但似乎无法使其工作：

绿色条突出显示 div toggleView。

我使用的唯一 css 如下：

.toggleView {
    padding: 20px;
}

为什么我不能让这个按钮组居中？

Answer 1

btn-group 具有 display:inline-block，因此您将在父容器中使用 text-center..

http://codeply.com/go/hyUYkUrtRN

注意：在 Bootstrap 4 中，center-block 现在是 mx-auto，代表 margin: 0 auto; 用于居中 display:block 元素。 Bootstrap 4 现在也有一个 d-block 类，因此可以将内联元素设置为 display:block 像这样..

<img src=".." class="d-block mx-auto" >

另见：Center the content inside a column in Bootstrap 4

Answer 2

Bootstrap 4（截至 2017 年 8 月 16 日）将使用 d-block 并使用 mx-auto 居中。

Answer 3

Bootstrap 4 没有 center-block 相反，我使用 d-block mx-auto 将显示设置为阻止，并将左右边距设置为自动。