引導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。