html – Bootstrap 4中心区无法居中

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

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

原文地址：https://www.jb51.cc/html/231755.html