html - Bootstrap 3 : Label on top on field and submit button in a form inline

Question

我正在尝试将 3 个选择菜单和一个提交按钮与 bootstrap 3 对齐。

我试过像这样使用行和内联属性，但它不起作用:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="row">
  <div class="col-md-3">
    <div class="form-group">
      <label class="control-label" for="date_deb">Date D&eacute;but</label>
      <select name="date_deb" id="date_deb" class="form-control">
        <option value="07/11/2012">07/11/2012</option>
        <option value="30/09/2012">30/09/2012</option>
      </select>
    </div>
  </div>
  <div class="col-md-3">
    <div class="form-group">
      <label class="control-label" for="date_deb">Date D&eacute;but</label>
      <select name="date_deb" id="date_deb" class="form-control">
        <option value="07/11/2012">07/11/2012</option>
        <option value="30/09/2012">30/09/2012</option>
      </select>
    </div>
  </div>
  <div class="col-md-3">
    <div class="form-group">
      <label class="control-label" for="date_deb">Date D&eacute;but</label>
      <select name="date_deb" id="date_deb" class="form-control">
        <option value="07/11/2012">07/11/2012</option>
        <option value="30/09/2012">30/09/2012</option>
      </select>
    </div>
  </div>
  <div class="col-md-3">
    <br/>
    <button type="submit" class="btn btn-success" id="date_search">Rechercher</button>
  </div>
</div>

和这个带有内联类的其他解决方案:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
   <div class="col-lg-12">
      <form class="form-inline" role="form" method="post">
          <div class="form-group">
              <label class="control-label" for="date_deb">Date D&eacute;but</label>
              <select name="date_deb" id="date_deb" class="form-control">
                <option value="07/11/2012">07/11/2012</option>
                <option value="30/09/2012">30/09/2012</option>          
              </select>
          </div>

          <div class="form-group">
              <label for="date_fin">Date Fin</label>
              <select name="date_fin" id="date_fin" class="form-control">
                  <option value="07/11/2012">07/11/2012</option>
                  <option value="30/09/2012">30/09/2012</option>                
              </select>
           </div>

          <div class="form-group">
            <label for="date_ref">Date R&eacute;f&eacute;rence</label>
             <select name="date_ref" id="date_ref" class="form-control">
                <option value="07/11/2012">07/11/2012</option>
                <option value="30/09/2012">30/09/2012</option>          
            </select>
          </div>

          <div class="form-group">
            <br/>
            <button type="submit" class="btn btn-success" id="date_search">Rechercher</button>
          </div>
        </form>
    </div>
</div>

但表单按钮仍未与选择菜单对齐。见下文 :
_{(来源:free.fr)}

Answer 1

您可能需要使用一些 CSS 来使您的按钮与选择下拉菜单

对齐

.row .btn {
    margin-top: 5px;
}

http://www.bootply.com/93481