我有以下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;
}
为什么我不能将此按钮组居中？
解决方法
btn-group有display：inline-block所以你可以在父容器中使用text-center.
http://codeply.com/go/hyUYkUrtRN
注意：在Bootstrap 4中,center-block现在为mx-auto,表示margin：0 auto;用于居中显示：块元素. Bootstrap 4现在也有一个d-block类,因此可以显示一个内联元素：这样的块…
< img src =“..”class =“d-block mx-auto”>
