选择“控制和引导”网格

Question

我发现了一个关于引导网格的奇怪问题。这是我第一次遇到这个问题，在互联网上找不到相关的东西。我有一个带有Label及其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>

截图：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>