我有以下 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;
定心 display:block
元素。 Bootstrap 4 现在有一个 d-block
类也是如此,因此可以使内联元素显示:像这样的 block ..
<img src=".." class="d-block mx-auto" >
关于html - Bootstrap 4 center-block 无法居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38251191/