私のビューに垂直ディバイダを適用したいと思います。
私はそれを行っている:divの間に垂直ディバイダを適用する方法
.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>
(フル拡大図でコードスニペットを参照してください)しかし、私はことを取得しています:私は配置する方法がわからない
より良い方法で仕切り。 3つの部分を分離する方法はありますか?
ありがとうございました。
はここで働いているようだ:[jsfiddle](https://jsfiddle.net/pgfuuLny/) – Arkej
あなたは2枚の垂直セパレータを必要とするか3? –
Btwでは、各ページは 'h1'要素を1つだけ持つべきです。 – connexo