我有随机数的列(由 FOR 循环生成)。
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
</div>
</div>
我想将最后一行列居中。默认情况下,最后 1 或 2 列左对齐。有什么方法可以轻松地将它们居中,还是我应该跳过使用“col-”并改用 flexbox?
最佳答案
您可以将 flex 样式添加到列的父级,在此示例中为 .row。
.mycol {
background: tomato;
padding: 10px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: white;
}
.row{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
</div>
</div>
关于html - 在 Bootstrap 3 中居中最后一列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58969153/