css - 如何在 div 之间应用垂直分隔线

Question

我想在我的 View 中应用垂直分隔线。
我已经做到了:(查看完整展开 View 中的代码片段)

.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;
 }