bootstrap 4 środkowy blok niezdolny do centrum

Question

Mam następujący bootstrap kod HTML (jego JSX stąd className ale idea jest taka sama):

<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> 

Próbuję wyśrodkować ten kod albo bootstrap centrum -blok lub z CSS, ale nie wydaje się uzyskać go do pracy:

zielony pasek podkreśla div toggleView.

Jedynym css Używam jest następujące:

.toggleView { 
    padding: 20px; 
} 

Dlaczego nie mogę centrum tej grupy przycisków?

Answer 1

btn-group ma display:inline-block więc należałoby użyć text-center w kontenerze nadrzędnym ..

http://codeply.com/go/hyUYkUrtRN

UWAGA: W Bootstrap 4, center-block jest teraz mx-auto, reprezentujący margin: 0 auto; do centrowania display:block elementy. Bootstrap 4 ma teraz d-block klasę zbyt więc inline element może być wykonany display: block tak ..

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

Zobacz także: Center the content inside a column in Bootstrap 4

Answer 2

Bootstrap 4 nie posiada center-block Zamiast używać d-block m-x-auto który ustawia wyświetlanie na blok, a lewy i prawy margines na auto.

Answer 3

Bootstrap 4 (od 2017-08-16) będzie używać d-block i do centrali użyjesz mx-auto.