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

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

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

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

Answer 2

Bootstrap 4（截至2017-08-16）将使用d-block并以mx-auto为中心。

Answer 3

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