有没有办法让三个col-md-3列并使它们居中。偏移不起作用,因为我必须偏移一列半的第一列。那还有另一种方法吗?
以下是代码的大纲:
.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>
&#13;
我在SO上找到的答案都与Bootstrap 3及更低版本有关。并没有使用Bootstrap 4.有人可以看看并让我知道吗?
答案 0 :(得分:12)
Flexbox utility classes是你的朋友
在这种情况下,您可以在justify-content-center
上使用.row
。
.row {
background-color: lavender;
}
.col-md-3 {
background-color: gray;
}
&#13;
<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"/>
&#13;
答案 1 :(得分:3)
将justify-content:center
应用于该行。
如上所示,BS4拥有自己的.justify-content-center
.col-md-3 {
background-color: #e2e2e2;
}
.row {
justify-content:center;
}
/* or apply the class "justify-content-center" to the row */
&#13;
<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>
&#13;
答案 2 :(得分:1)
flex
:
<div class="container">
<div class="d-flex 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>