html - HTML，CSS中的空网格列

在row1中，我有4列（已填充），在row2中，我希望第二列为空并占用空间，
但是第三列向左移动并占据第二列。我不想使用表格和&nbsp。

.col {
  display: inline-block;
  margin-right: 4%;
  float: left;
}

.col:last-child {
  margin-right: 0;
}

.col3 {
  width: 21.98%;
}

<div class="row1">
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>
<div class="row2">
  <div class="col col3">Lorem</div>
  <div class="col col3"></div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>

最佳答案

您可以设置偏移量，但是如果您仍然希望在DOM中保留该空col，则可以通过插入空白 来进行简单的修改。

如果您不想使用空白空间技巧，则可以使用分配给第三列的引导程序类col-md-offset-3。

.col {
  display: inline-block;
  margin-right: 4%;
  float: left;
}

.col:last-child {
  margin-right: 0;
}

.col3 {
  width: 21.98%;
}

<div class="row1">
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>
<div class="row2">
  <div class="col col3">Lorem</div>
  <div class="col col3">&nbsp;</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>

这是使用自定义的.col-md-offset-3类的另一个示例。

.col {
  display: inline-block;
  margin-right: 4%;
  float: left;
}

.col:last-child {
  margin-right: 0;
}

.col3 {
  width: 21.98%;
}

.col-md-offset-3 {
  margin-left: 25.98%; /* combined margin = default margin (4%) + col width (21.98%) */
}

<div class="row1">
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>
<div class="row2">
  <div class="col col3">Lorem</div>
  <div class="col col3"></div>
  <div class="col col3 col-md-offset-3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>

关于html - HTML，CSS中的空网格列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44110568/