如何在div

Question

我想在我的视野中应用垂直分隔线 我已经这样做了:(请参阅完整展开视图中的代码段）

.grid-divider {
  position: relative;
  padding: 0;
}

.grid-divider>[class*='col-'] {
  position: static;
}

.grid-divider>[class*='col-md-4']:nth-child(n+1):before {
  content: "";
  border-left: 1px solid #DDD;
  position: absolute;
  top: 0;
  bottom: 0;
}

.col-padding {
  padding: 0 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row grid-divider">
  <div class="col-md-4 text-center">
    <h1>Prévisionnel</h1>
    <div class="form-group">
      <label class="control-label col-md-3 control-label-tv" for="field_budgetCoutMateriaux">Budget Cout Materiaux</label>
      <div class="col-md-3">
        <input type="number" class="form-control" name="budgetCoutMateriaux" id="field_budgetCoutMateriaux" ng-model="vm.chantier.budgetCoutMateriaux" />
      </div>
    </div>

  </div>
  <div class="col-md-4 text-center">
    <h1>Prévisionnel</h1>
    <div class="form-group">
      <label class="control-label col-md-3 control-label-tv" for="field_budgetCoutMateriaux">Budget Cout Materiaux</label>
      <div class="col-md-3">
        <input type="number" class="form-control" name="budgetCoutMateriaux" id="field_budgetCoutMateriaux" ng-model="vm.chantier.budgetCoutMateriaux" />
      </div>
    </div>
  </div>
  <div class="col-md-4 text-center">
    <h1>Prévisionnel</h1>
    <div class="form-group">
      <label class="control-label col-md-3 control-label-tv" for="field_budgetCoutMateriaux">Budget Cout Materiaux</label>
      <div class="col-md-3">
        <input type="number" class="form-control" name="budgetCoutMateriaux" id="field_budgetCoutMateriaux" ng-model="vm.chantier.budgetCoutMateriaux" />
      </div>
    </div>
  </div>
</div>

但我得到了：

我不知道如何以更好的方式放置分隔线。 有没有办法很好地分开这三个部分？

感谢。

Answer 1

关注此css：

.grid-divider>[class*='col-'] {
     position: relative;
 }
.grid-divider>[class*='col-md-4']:nth-child(n+1):before {
    content: "";
    border-left: 1px solid #DDD;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
 }