コントロールとブートストラップグリッドを選択

Question

ブートストラップグリッドで奇妙な問題が発生しています。これは私がこの問題を抱えている初めてのことであり、インターネット上の何かを見つけることはできません。私はラベルとそのSelectコントロール、それぞれcol-md-3 divのフォームを持っています。

<div class="form-group col-md-3"> 
     <label class="control-label" for="select-1">Vérification de l'état</label> 
    </div> 
    <div class="form-group col-md-3"> 
     <select name="select-1"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
     </select> 
    </div> 
    <div class="form-group col-md-3"> 
     <label class="control-label" for="select-2">Nettoyage corps de chauffe</label> 
    </div> 
    <div class="form-group col-md-3"> 
     <select name="select-2"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
     </select> 
    </div> 
    <div class="form-group col-md-3"> 
     <label class="control-label" for="select-3">Démontage et nettoyage du brûleur</label> 
    </div> 
    <div class="form-group col-md-3"> 
     <select name="select-3"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
     </select> 
    </div> 
    <div class="form-group col-md-3"> 
     <label class="control-label" for="select-4">Nettoyage préfiltre (le cas échéant)</label> 
    </div> 
    <div class="form-group col-md-3"> 
     <select name="select-4"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
     </select> 
    </div> 
    <div class="form-group col-md-3"> 
     <label class="control-label" for="select-5">Nettoyage du filtre de la pompe</label> 
    </div> 
    <div class="form-group col-md-3"> 
     <select name="select-5"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
     </select> 
    </div> 
    <div class="form-group col-md-3"> 
     <label class="control-label" for="select-6">Verification des dispositifs de sécurité</label> 
    </div> 
    <div class="form-group col-md-3"> 
     <select name="select-6"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
     </select> 
    </div> 
    <div class="form-group col-md-3"> 
     <label class="control-label" for="select-7">Verification du circulateur de chauffage</label> 
    </div> 
    <div class="form-group col-md-3"> 
     <select name="select-7"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
     </select> 
    </div> 

スクリーンショット：私は持っている問題は、4つの初コントロールがOKであるということですが、第五は、画面の右側にaligndされ、他のすべてがOKです....ここに私のコードとスクリーンショットです：http://prntscr.com/d21j33

Answer 1

ブートストラップは、グリッドのオーバーフロー（12単位以上）を必要に応じて調整するものではありません。

代わりに行を使用して、行内の各12個のグリッド単位を区切ります。

私はあなたのコード更新https://jsfiddle.net/mydkahdf/1/

<div class="row"> 
    <div class="form-group col-md-3"> 
    <label class="control-label" for="select-1">Vérification de l'état</label> 
    </div> 
    <div class="form-group col-md-3"> 
    <select name="select-1"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
    </select> 
    </div> 
    <div class="form-group col-md-3"> 
    <label class="control-label" for="select-2">Nettoyage corps de chauffe</label> 
    </div> 
    <div class="form-group col-md-3"> 
    <select name="select-2"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
    </select> 
    </div> 
</div> 
<div class="row"> 
    <div class="form-group col-md-3"> 
    <label class="control-label" for="select-3">Démontage et nettoyage du brûleur</label> 
    </div> 
    <div class="form-group col-md-3"> 
    <select name="select-3"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
    </select> 
    </div> 
    <div class="form-group col-md-3"> 
    <label class="control-label" for="select-4">Nettoyage préfiltre (le cas échéant)</label> 
    </div> 
    <div class="form-group col-md-3"> 
    <select name="select-4"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
    </select> 
    </div> 
</div> 
<div class="row"> 
    <div class="form-group col-md-3"> 
    <label class="control-label" for="select-5">Nettoyage du filtre de la pompe</label> 
    </div> 
    <div class="form-group col-md-3"> 
    <select name="select-5"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
    </select> 
    </div> 
    <div class="form-group col-md-3"> 
    <label class="control-label" for="select-6">Verification des dispositifs de sécurité</label> 
    </div> 
    <div class="form-group col-md-3"> 
    <select name="select-6"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
    </select> 
    </div> 
</div> 
<div class="row"> 
    <div class="form-group col-md-3"> 
    <label class="control-label" for="select-7">Verification du circulateur de chauffage</label> 
    </div> 
    <div class="form-group col-md-3"> 
    <select name="select-7"> 
     <option value="no" selected>Sans objet</option> 
     <option value="valid">Validé</option> 
     <option value="notvalid">Non validé</option> 
    </select> 
    </div> 
</div>