html - .row 内的水平居中列

Question

我很难在 bootstrap 3 中将 .row 内的列水平居中。我尝试了很多方法，从 margin:0 auto;显示: flex ；等等等等，它只是不会“移动”到中间。我也发布了 jsfiddle，所以你可以实时看到它:

https://jsfiddle.net/z2Lo4txL/4/

<div class="container"> 
    <div class="row center-col">
        <div class="col-md-4 col-sm-6 pattern">
            <h3>Ipsum</h3>
                <div class="f-icon">
                    <i class="ion-ios-flask-outline x5"></i>
                </div>
                        <div class="f-body">
                            <p class="pt5">Curabitur rhoncus dolor sem, vel   interdum quam congue in. In sed est faucibus quol. Feugiat iunnonies massa consisa der.</p>
                        </div>    
        </div>
        <div class="col-md-4 col-sm-6 pattern">
            <h3>Ipsum</h3>
                <div class="f-icon">
                    <i class="ion-ios-flask-outline x5"></i>
                </div>
                        <div class="f-body">
                            <p class="pt5">Curabitur rhoncus dolor sem, vel interdum quam congue in. In sed est faucibus quol. Feugiat iunnonies massa consisa der.</p>
                        </div>    
        </div>
        <div class="col-md-4 col-sm-6 pattern">
            <h3>Ipsum</h3>
                <div class="f-icon">
                    <i class="ion-ios-flask-outline x5"></i>
                </div>
                        <div class="f-body">
                            <p class="pt5">Curabitur rhoncus dolor sem, vel interdum quam congue in. In sed est faucibus quol. Feugiat iunnonies massa consisa der.</p>
                        </div>    
        </div>
        <div class="col-md-4 col-sm-6 pattern">
            <h3>Ipsum</h3>
                <div class="f-icon">
                    <i class="ion-ios-flask-outline x5"></i>
                </div>
                        <div class="f-body">
                            <p class="pt5">Curabitur rhoncus dolor sem, vel interdum quam congue in. In sed est faucibus quol. Feugiat iunnonies massa consisa der.</p>
                        </div>    
        </div>
        <div class="col-md-4 col-sm-6 pattern">
            <h3>Ipsum</h3>
                <div class="f-icon">
                    <i class="ion-ios-flask-outline x5"></i>
                </div>
                        <div class="f-body">
                            <p class="pt5">Curabitur rhoncus dolor sem, vel interdum quam congue in. In sed est faucibus quol. Feugiat iunnonies massa consisa der.</p>
                        </div>    
        </div>
        <div class="col-md-4 col-sm-6 pattern">
            <h3>Ipsum</h3>
                <div class="f-icon">
                    <i class="ion-ios-flask-outline x5"></i>
                </div>
                        <div class="f-body">
                            <p class="pt5">Curabitur rhoncus dolor sem, vel interdum quam congue in. In sed est faucibus quol. Feugiat iunnonies massa consisa der.</p>
                        </div>    
        </div>                                                            
    </div>
</div>

CSS

.center-col {
margin:0 auto;
}

.pattern {
background-image:url(http://i1cevic.com/img/pattern.jpg);
margin:5px;
}

.f-icon {
float:left;
}

.x5 { font-size:40px!important }

h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing:normal;
font-size: 18px;
color:#303233;
margin-top:5px;
margin-bottom:5px;
}

Answer 1

看看Column ordering ，像这样使用 col-push-*:

<div class="col-md-push-4 col-md-4 col-sm-push-3 col-sm-6 pattern">Content here</div>

我刚刚在这里更新了它:https://jsfiddle.net/z2Lo4txL/7/

或者您可以使用 row 类在 div 中制作任何内容，然后使用 col-*-offset-* 或 col-*-push* 使其居中:

<div class="row>
   <div class="col-sm-offset-3 col-sm-6></div>
</div>

如果你想让它显示在 sm-6 上，你有 sm-6 来使它足够 col-12，让它为2 个空格(左右)，我们得到的结果是 offset-3 或 push-3。

希望对您有所帮助。