Bootstrap 4 центральный блок не может центрировать

У меня есть следующий код html bootstrap (его 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;
}

Почему я не могу центрировать эту группу кнопок?

Ответы

Ответ 1

btn-group имеет display:inline-block, поэтому вы должны использовать text-center в родительском контейнере.

http://codeply.com/go/hyUYkUrtRN

ПРИМЕЧАНИЕ. В Bootstrap 4 center-block теперь mx-auto, представляя margin: 0 auto; для центрирования элементов display:block. Bootstrap 4 теперь имеет класс d-block, поэтому встроенный элемент может быть отображен: блокируйте, как это.

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

Также см.: Центрировать содержимое внутри столбца в Bootstrap 4

Ответ 2

Bootstrap 4 (начиная с 2017-08-16) будет использовать d-block, а для центра вы используете mx-auto.

Ответ 3

У Bootstrap 4 нет center-block Вместо этого я использую d-block m-x-auto, который устанавливает отображение для блокировки, а левое и правое поля - автоматически.