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在输入字段旁边附加一个按钮。

＆＃13;

<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>

＆＃13;

具有内联形式+引导程序的输入组

1 个答案: