我试图在 bootstrap 中将我的列居中，以便它们均匀分布。我已将每列设置为 col-lg-4，这样每行最多有 3 列。因此，如果有 5 列，则行应如下所示:
col1 col2 col3
col4 col5
如果有 4 列，它们应该如下所示:
col1 col2 col3
col4
如果是 2，它们应该是这样的:
col1 col2
我希望这是有道理的。我已将封闭行设置为
显示:表格
和每一列
{
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin: auto 0;
}
但是由于某些原因，列没有居中而是左对齐。有人可以帮忙吗？查看插入的代码。
.bd-centered {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin: auto 0;
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="row">
<div style="display: table;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
<h6 class="text-center breakdown-figures"><span class="glyphicon icon-five text-primary" aria-hidden="true"></span> 70%</h6>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
<h6 class="text-center breakdown-figures"><span class="glyphicon icon-four text-success" aria-hidden="true"></span> 10%</h6>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
<h6 class="text-center breakdown-figures"><span class="glyphicon icon-three text-muted" aria-hidden="true"></span> 10%</h6>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
<h6 class="text-center breakdown-figures"><span class="glyphicon icon-two text-warning" aria-hidden="true"></span> 10%</h6>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered">
<h6 class="text-center breakdown-figures"><span class="glyphicon icon-one text-danger" aria-hidden="true"></span> 20%</h6>
</div>
</div>
</div>
</body>
</html>最佳答案
我怀疑你没有完全理解 bootstrap 网格系统... 每行有 12 个单位宽，您可以根据需要将它们分开。例如，在您的“5 列布局”中，您实际上在做两行:第一行中的每一列为 4 个单位宽，第二行中的每一列为 6 个单位宽。
对于 5 列布局，您可以这样做:
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
对于 4 列布局:
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-12">...</div>
对于 2 列布局:
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
关于html - 居中 Bootstrap 列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38777850/