Bootstrap 4 center-block 无法居中

Question

我有以下引导程序 html 代码（它的 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>

我正在尝试使用 bootstrap center-block 或 CSS 将这段代码居中，但似乎无法让它工作：

绿色条突出显示 div toggleView 。

我使用的唯一 CSS 如下：

 .toggleView {
    padding: 20px;
}

为什么我不能居中这个按钮组？

原文由 ApathyBear 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

btn-group 有 display:inline-block 所以你会在父容器中使用 text-center

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 现在也有一个 d-block 类，因此可以使内联元素显示：像这样的块..

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

另请参阅： 在 Bootstrap 4 中将内容置于列中

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Bootstrap 4（截至 2017 年 8 月 16 日）将使用 d-block 并使用 mx-auto 。

原文由 Salvador Cervantes 发布，翻译遵循 CC BY-SA 3.0 许可协议