Question

我是 Bootstrap

的新手

我有一个HTML：

<div class="row">
  <div class="col-lg-3">
    First Column
  </div>
  <div class="col-lg-3">
    Second Column
  </div>
</div>

现在只有两列，每列3个，并且不会覆盖行的整个长度，因此视图中行的右侧会有空白区域。

这些列是动态的，可能是一列，两列，三列，也可能是一次连续四列。

我想要这个，如果行中大小为3的列少于四列，那么这些列应该在行的中心而不是左侧，而在右侧则是空白。

请建议，我该如何处理此类案件？

Answer 1

根据您的要求，如果您不熟悉bootstrap，我建议您实施 bootstrap4 ，因为此框架基于 Flexbox ，这里很容易对齐列

<强>参考：

＆＃13;

.col-3 {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row justify-content-center">
    <div class="col-3">1</div>
    <div class="col-3">2</div>
  </div>
</div>

＆＃13;

但是如果您正在使用已经使用bootstrap3并且无法切换到bootstrap4的代码，请在row中使用您的自定义类并使用flexbox

＆＃13;

.flex-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.flex-row .col-xs-3 {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row flex-row">
    <div class="col-xs-3">1</div>
    <div class="col-xs-3">2</div>
  </div>
</div>

＆＃13;

Answer 2

.row {
   display: flex;
   justify-content: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-3">
        First Column
  </div>
  <div class="col-lg-3">
        Second Column
  </div>
</div>

你可以使用偏移类或只添加这些css

.row {
    display: flex;
    justify-content: center;
}

如果列数少于完整行，则将列放在中心

2 个答案: