html - Bootstrap 3 : フィールドの上にラベルを付け、フォームのインラインで送信ボタン

Question

3 つの選択メニューと送信ボタンをブートストラップ 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

ボタンをselect dropdowns

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

http://www.bootply.com/93481