相关疑难解决方法(0)

我正在努力使用Bootstrap的CSS类来居中图像.我已经尝试了几件事.一个是mx-auto在img元素中添加Bootstrap CSS类,但它什么也没做.

感谢帮助.

<div class="container">
    <div class="row">
        <div class="col-4 mx-auto">
            <img class=""...> <!-- center this image within the column -->

            <form...>

            <p...>
            <p...>
            <p...>                
        </div>
    </div>
</div>

我有以下bootstrap 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;
}

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

我试图在 Bootstrap 4 Alpha 6 的旋转木马中水平居中图像。

我尝试过的任何方式似乎都不起作用，包括使用center-block.

这是我到目前为止尝试过的：http : //codepen.io/anon/pen/wJdjQg?editors=1100

任何提示？