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="but 我有以下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

总结

以上是内存溢出为你收集整理的html – Bootstrap 4中心区无法居中全部内容，希望文章能够帮你解决html – Bootstrap 4中心区无法居中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。