带有空白表单组 col-md-6 的引导网格答案

【问题标题】：bootstrap grid with blank form-group col-md-6带有空白表单组 col-md-6 的引导网格
【发布时间】：2016-06-10 13:59:04
【问题描述】：

我想实现如下所示的网格。有一个问题，因为我也有表单组。问题是，col-md-6 before last 和最后一个没有正确对齐。

<form action="">
  <div class="col-md-1 pull-right text-right padding-right-0">
    <div class="action-buttons">
      <a href="#" class="pull-right button-edit-content" data-target="#s3">
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </a>              
    </div>
  </div>
  <div class="form-group col-md-6">
    <label for="">label_1</label>
    <input type="text">
  </div>
  <div class="form-group col-md-5">
    <label for="">label_2</label>
    <input type="text">
  </div>
  <div class="form-group col-md-6">
    <label for="">label_3</label>
    <input type="text">
  </div>
  <div class="form-group col-md-5">
    &nbsp;
  </div>
  <div class="form-group col-md-6">
    <label for="">label_5</label>
    <input type="text">
  </div>
  <div class="form-group col-md-5">
    <label for="">label_6</label>
    <input type="text">
  </div>
</form>

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 frontend

【解决方案1】：

试着把它们排成一行，比如

<div class="row">
      <div class="form-group col-md-6">
        <label for="">label_1</label>
        <input type="text">
      </div>
      <div class="form-group col-md-5">
        <label for="">label_2</label>
        <input type="text">
      </div>
    </div>
    <div class="row">
      <div class="form-group col-md-6">
        <label for="">label_3</label>
        <input type="text">
      </div>
      <div class="form-group col-md-5">
        <div>&nbsp;</div>
      </div>
    </div>

【讨论】：

【解决方案2】：

我想我明白你在做什么。我认为问题在于空列的高度与其他列没有可比性。

我建议删除该空列并通过向其添加一个类来清除以下列的左侧，就像在这个小提琴中一样：https://jsfiddle.net/vv807bax/

CSS：

.clearleft {
  clear: left;
}

HTML：

<div class="container">
<div class="row">
<form action="">
  <div class="col-md-1 pull-right text-right padding-right-0">
    <div class="action-buttons">
      <a href="#" class="pull-right button-edit-content" data-target="#s3">
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </a>              
    </div>
  </div>
  <div class="form-group col-md-6">
    <label for="">label_1</label>
    <input type="text">
  </div>
  <div class="form-group col-md-5">
    <label for="">label_2</label>
    <input type="text">
  </div>
  <div class="form-group col-md-6">
    <label for="">label_3</label>
    <input type="text">
  </div>
  <div class="form-group col-md-6 clearleft">
    <label for="">label_5</label>
    <input type="text">
  </div>
  <div class="form-group col-md-5">
    <label for="">label_6</label>
    <input type="text">
  </div>
</form>
</div>
</div>

【讨论】：

或者你可以使用bootstrap的clearfix：