Question

我在使用bootstrap网格时遇到了一个奇怪的问题。这是我第一次遇到这个问题，并且无法在互联网上找到重要的东西。我有一个带有Label及其Select控件的表单，每个表单都在col-md-3 div上。我遇到的问题是4个第一控件都可以，但是第五个是屏幕右边的alignd，其他所有都没问题....这是我的代码和截图：

<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

Bootstrap不应该根据需要对齐网格溢出（超过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>

选择控件和Bootstrap网格

1 个答案: