html - 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类也是如此，因此可以使内联元素显示:像这样的 block ..

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

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