引导4中心块无法居中 [英] bootstrap 4 center-block unable to center

问题描述

我有以下bootstrap html代码（它的JSX因此是 className ，但想法是一样的）：

 < div className =toggleView btn-group center-blockrole =grouparia-label =Basic example> 
< button onClick = {this.handleTimelineClick} type =buttonclassName = {this.state.toggleCalendar == false？ btn btn-secondary active：btn btn-secondary}>时间轴< /按钮> 
< button onClick = {this.handleCalendarClick} type =buttonclassName = {this.state.toggleCalendar == true？ btn btn-secondary active：btn btn-secondary}>日历< / button> 
< / div> 
  

我试图用bootstrap center-block或CSS来集中这段代码，但似乎无法得到它的工作：

绿色栏突出显示div toggleView 。

我使用的唯一的CSS如下：

  .toggleView {
 padding：20px; 
} 
  

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

解决方案

btn-group has 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 类，所以一个内联元素可以像这样显示：block。

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

另请参阅：将列表中的内容居中in 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

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