在Bootstrap 4中将三列col-md-3列居中 [英] Center three col-md-3 columns in Bootstrap 4
本文介绍了在Bootstrap 4中将三列col-md-3列居中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有一种方法可以让三列col-md-3列居中.偏移不起作用,因为我必须将第一列偏移一半.那么还有另一种方法吗?
Is there a way to have three col-md-3 columns and center them. Offset doesn't work, because I'd have to offset the first column for a column and a half. So is there another way to do this?
这是代码的概要:
.col-md-3 {
background-color: #e2e2e2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">First column</div>
<div class="col-md-3">Second column</div>
<div class="col-md-3">Third column</div>
</div>
</div>
我设法在SO上找到的答案都与Bootstrap 3及更低版本有关.并且不能与Bootstrap 4一起使用.有人可以看一下并让我知道吗?
The answers I managed to find on SO were all related to Bootstrap 3 and lower. And didn't work with Bootstrap 4. Can someone take a look and let me know?
推荐答案
Flexbox实用程序类是您的朋友.
在这种情况下,您可以在.row
上使用justify-content-center
.
The Flexbox utility classes are your friend.
You can use justify-content-center
on .row
in this case.
.row {
background-color: lavender;
}
.col-md-3 {
background-color: gray;
}
<div class="container">
<div class="row justify-content-center">
<div class="col-md-3">First column</div>
<div class="col-md-3">Second column</div>
<div class="col-md-3">Third column</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
这篇关于在Bootstrap 4中将三列col-md-3列居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文