Bootstrap 4 center-block无法居中

Question

我有以下 bootstrap 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>

我正在尝试使用 bootstrap center-block 或 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 class 所以内联元素可以像这样 display:block..

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

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

Answer 2

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

Answer 3

Bootstrap 4（截至 2017-08-16）将使用 d-block 并使用 mx-auto.

居中

Bootstrap 4 center-block无法居中

Bootstrap 4 center-block unable to center

html

css

twitter-bootstrap

bootstrap-4