インラインフォーム+ブートストラップの入力グループ

Question

input-groupを使用して入力ボックス内のボタンを追加しようとしていますが、IEでは機能しません。

コードサンプル： -

<div class="col-md-12"> 
     <div class="form-group row">        
      <label for="cVal" class="col-md-1 control-label pull-left text- 
                 nowrap">C Id:</label> 
      <div class="col-md-3 input-group"> 
       <input type="text" class="form-control" id="cVal" 
        name="cVal" placeholder="C Id" value='<jsp:getProperty 
        property="c_id" name="adminObj"/>'> 
       <span class="input-group-btn"> 
        <button class="btn btn-default" type="button">Go! 
        </button> 
        </span> 
       </div> 


       <label for="cVal" class="col-md-1 control-label pull-left 
        text-nowrap">C Id:</label> 
       <div class="col-md-3 input-group"> 
        <input type="text" class="form-control" id="cVal" 
         name="cVal" placeholder="C Id" 
         value='<jsp:getProperty property="c_id" 
         name="adminObj"/>'> 
        <span class="input-group-btn"><button class="btn btn- 
         default" type="button">Go!</button></span> 
       </div> 

       <label for="endDateVal" class="col-md-1 control-label pull- 
        left text-nowrap">Image Cat Id:</label> 
        <div class="col-md-3"> 
        <input type="text" class="form-control" id="endDateVal" 
         name="endDateVal" placeholder="End Date" 
         value='<jsp:getProperty property="end_valid_date" 
         name="adminObj"/>'> 
        </div>        
      </div> 
</div> 

Answer 1

使用input-group-btnクラスの代わりに、input-group-addon。

.input-group-addonクラスは、アイコンまたはヘルプテキストを入力フィールドの横に付けます。

.input-group-btnは入力フィールドの横にボタンを付けます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="form-group row"> 
 
    <label for="cVal" class="col-md-1 control-label pull-left text-nowrap">C Id:</label> 
 
    <div class="col-md-3 input-group"> 
 
    <input type="text" class="form-control" id="cVal" name="cVal" placeholder="C Id" value='<jsp:getProperty property="c_id" name="adminObj"/>'> 
 
    <span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span> 
 
    </div> 
 

 
</div> 
 
</div>