Bootstrap 4中心区无法居中

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

注意:center-block现在mx-auto,在Bootstrap 4中,代表margin: 0 auto;居中display:block元素.Bootstrap 4现在也有一个d-block类,所以可以显示一个内联元素:这样的块.

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

另请参阅:将内容置于Bootstrap 4中的列中

Answer 2

Bootstrap 4没有center-block相反,我使用d-block mx-auto哪些设置显示为阻止,左右边距为自动.

Answer 3

Bootstrap 4(截至2017-08-16)将使用d-block并集中使用mx-auto.