我试图将我的列放在引导程序的中心，所以它们均匀分布。我已将每列设置为col-lg-4，以便每行最多3列。因此，如果有5列，则行应如下所示：
col1 col2 col3
col4 col5
如果有4列，则它们应如下所示：
col1 col2 col3
col4
如果为2，则它们应如下所示：
col1 col2
我希望这是有道理的。我将封闭行设置为
display: table和每一列到
{
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>最佳答案
我怀疑您不完全了解引导网格系统...
每行的宽度为12个单位，您可以根据需要将其划分。例如，在“五列布局”中，您实际上是在做两行：第一行的每一列为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>