Question

我试图将我的列放在引导程序中，因此它们是均匀分布的。我已将每列设置为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;
}

但出于某种原因，列不会居中并保持对齐。有人可以帮忙吗？请参阅插入的代码。

＆＃13;

.bd-centered { 
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center; 
    margin: auto 0;
}

＆＃13;

<!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>

＆＃13;

Answer 1

我怀疑你没有完全理解引导网格系统...... 每行宽12个单位，您可以根据需要将它们分开。例如，在您的＆＃34; 5列布局中，＆＃34;你真的做了两行：第一行中的每一列是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>

Answer 2

以下是您想要的内容 Fiddle 输出：

col1      col2     col3
     col4      col5

如果有4列，它们应该如下所示：

col1      col2     col3
          col4

＆＃13;

.bd-centered { text-align: center;
display: flex;
align-items: center;
justify-content: center; 
margin: auto 0;}

＆＃13;

<!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>
<script type="text/javascript">
$(document).ready(function() {
  var elem = $("div.col-lg-4").length;
  switch (elem % 3) {
    case 1:
      $(".table div:nth-child(" + elem + ")").removeClass('col-lg-4 col-md-4 col-sm-4 col-xs-4').addClass('col-lg-12 col-md-12 col-sm-12 col-xs-12');
      break;
    case 2:
      $(".table div:nth-child(" + elem + ")").removeClass('col-lg-4 col-md-4 col-sm-4 col-xs-4').addClass('col-lg-6 col-md-6 col-sm-6 col-xs-6');
      $(".table div:nth-child(" + (elem - 1) + ")").removeClass('col-lg-4 col-md-4 col-sm-4 col-xs-4').addClass('col-lg-6 col-md-6 col-sm-6 col-xs-6');
      break;
    default:
      break;
  }

});
</script>
</head>
<body>
  <div class="row">
<div class="table" 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>

＆＃13;

中心引导列

2 个答案: