如何在bootstrap 4中居中卡？

Question

我正在使用bootstrap 4 alpha 3.
我想将卡水平居中在整个页面中间.

Preview / link: http://codepen.io/vaibhavsingh97/full/VjRAXW

我已经尝试了bootstrap 4示例页面上列出的所有不同选项.

我怎样才能做到这一点？

Answer 1

更新2018年

不需要额外的CSS,Bootstrap 4中有多种居中方法:

• text-center对于中心display:inline元素
• mx-auto用于display:block内部中心元素display:flex(d-flex)
• offset-*或者mx-auto可以用于居中网格列
• 或justify-content-center上row至中心格列

mx-auto(自动x轴边距)将在display:flex具有已定义宽度的元素(%,vw,px等)中居中.默认情况下,Flexbox在网格列上使用,因此还有各种居中方法.

在你的情况下,你可以简单mx-auto到cards.

Answer 2

添加.card的CSS

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

这是笔

更新: 您可以使用.mx-autobootstrap 4中可用的类来居中卡.

Answer 3

将您想要移动到此 div 标签内的中心的元素。

<div class="col d-flex justify-content-center">
</div>

Answer 4

将所有卡片包装在引导行中

<div class="row justify-content-center"> your cards loop </div>

Answer 5

<div class="container">
    <div class="row align-items-center vh-100">
        <div class="col-6 mx-auto">
            <div class="card shadow border">
                <div class="card-body d-flex flex-column align-items-center">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                        the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
</div>