引导4中心块无法居中

Question

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

我试图用任何引导中心至中心的验证码 - 阻塞或CSS，但似乎无法得到它的工作：

绿色条突出显示的div toggleView。

我使用的唯一的CSS如下：

.toggleView { 
    padding: 20px; 
} 

为什么我不能中心这个按钮组？

Answer 1

btn-group有display:inline-block所以你会在父容器使用text-center ..

http://codeply.com/go/hyUYkUrtRN

注：在引导4，center-block现在是mx-auto，定心display:block元素代表margin: 0 auto;。引导4现在有一个d-block类过这样一个内联元素可以进行显示：块这样的..

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

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

Answer 2

引导4没有center-block相反，我使用d-block m-x-auto它将显示设置为阻止，并将左右边距设置为自动。

Answer 3

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