web-dev-qa-db-fra.com

Bootstrap 4 bloc central incapable de centrer

J'ai le code bootstrap) (son JSX d'où le className mais l'idée est la même):

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

J'essaie de centrer ce code avec soit bootstrap center-block ou CSS), mais je n'arrive pas à le faire fonctionner:

enter image description here

La barre verte met en évidence la div toggleView.

Le seul css que j'utilise est le suivant:

.toggleView {
    padding: 20px;
}

Pourquoi ne puis-je pas centrer ce groupe de boutons?

htmlcsstwitter-bootstrapbootstrap-4
23
ApathyBear

btn-group a display:inline-block donc vous utiliseriez text-center dans le conteneur parent ..

http://codeply.com/go/hyUYkUrtRN

REMARQUE: Dans Bootstrap 4, center-block est maintenant mx-auto, représentant margin: 0 auto; pour le centrage display:block éléments. Bootstrap 4 a maintenant un d-block class aussi afin de pouvoir afficher un élément en ligne: bloc comme ça ..

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

Voir aussi: Centrer le contenu dans une colonne de Bootstrap 4

50
Zim

Bootstrap 4 n'a pas center-block Au lieu de cela, j'utilise d-block mx-auto qui définit l’affichage sur bloquer et les marges gauche et droite sur auto.

6
Greg Gum

Bootstrap 4 (à partir du 16/08/2017) utilisera d-block et pour centrer vous utilisez mx-auto.

6
Salvador Cervantes