如何在引导程序4的中心卡？

我正在使用引导程序4α3。
我想把卡片水平地放在页面的中间

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

我已经尝试了所有不同的选项列出了引导卡4示例页面。

我怎么才能做到呢？

366428 次浏览
小开
最佳答案

添加 css for. card

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

这是 钢笔

更新: 您可以使用引导程序4中提供的类 .mx-auto到居中卡。

小开

2019年最新情况

不需要额外的 CSS，Bootstrap 4中有 多重定心方法:

  • 中心 display:inline元素的 text-center
  • mx-auto用于在 display:flex(d-flex)内定心 display:block元件
  • 可以使用 offset-*或 mx-auto将网格列居中
  • 或 row上的 justify-content-center到中心网格列

mx-auto (auto x-axis margins) will center inside display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also 各种定心方法.

在您的情况下，您可以简单地 mx-auto卡。

小开

也可以使用 Bootstrap 4 flex 类

比如: .align-item-center和 .justify-content-center

我们可以对所有设备视图使用相同的这些类。

比如: .align-item-sm-center, .align-item-md-center, .justify-content-xl-center, .justify-content-lg-center, .justify-content-xs-center

. text-center 类用于对齐居中的文本。

小开

我基本上建议左右两边的间隙相等，宽度设置为自动，比如:

.bmi {         /*my additional class name -for card*/
margin-left: 18%;
margin-right: 18%;
width: auto;
}
小开

将要移动到中心的元素放在这个 div 标记中。

<div class="col d-flex justify-content-center">
</div>
小开 
<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>
小开

有一种方法可以让你的卡居中，那就是创建三个 div，第一个和最后一个的值相等，如下图所示。

    <div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur aut officia ducimus provident facilis nam doloremque porro autem corporis.</p>
</div>
<div class="col-md-3"></div>
</div>
</div>
小开

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

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

如果您使用了 booststrap，则不需要任何内部的外部 CSS 来使卡居中。

此外，Bootstrap 还包含一个。Mx-auto 类，用于水平居中的固定宽度块级内容ーー即具有 display: block 和 width set 的内容ーー通过将水平边距设置为 auto。

好好利用

      mx-auto    // place this code in your main card div

提交答案