Bootstrap 4 中心块无法居中 [英] Bootstrap 4 center-block unable to center

问题描述

我有以下引导 html 代码(它的 JSX 因此是 className 但想法是一样的):

<button onClick={this.handleTimelineClick} type="button" className={this.state.toggleCalendar == false ?"btn btn-secondary active" : "btn btn-secondary"}>时间线</button><button onClick={this.handleCalendarClick} type="button" className={this.state.toggleCalendar == true ?"btn btn-secondary active ":"btn btn-secondary"}>日历</button>

我正在尝试使用引导程序中心块或 CSS 将此代码居中，但似乎无法使其正常工作:

绿色条突出显示 div toggleView.

我使用的唯一 css 如下:

.toggleView {填充:20px；}

为什么我不能将此按钮组居中?

解决方案

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 类，所以内联元素可以像这样 display:block ..

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

另见:将里面的内容居中Bootstrap 4 中的一列

I have the following bootstrap html code (its JSX hence the className but the idea is the same):

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

I am trying to center this code with either bootstrap center-block or with CSS but cannot seem to get it to work:

The green bar highlights the div toggleView.

The only css I am using is the following:

.toggleView {
    padding: 20px;
}

Why can I not center this button group?

解决方案

btn-group has display:inline-block so you would use text-center in the parent container..

http://codeply.com/go/hyUYkUrtRN

NOTE: In Bootstrap 4, center-block is now mx-auto, representing margin: 0 auto; for centering display:block elements. Bootstrap 4 now has a d-block class too so an inline element can be made display:block like this..

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

Also see: Center the content inside a column in Bootstrap 4

这篇关于Bootstrap 4 中心块无法居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！