Bootstrap輸入組插件不同高度

Question

我創建一個帶輸入組插件的timpicker。

<div class="input-group bootstrap-timepicker timepicker"> 
         <input id="timepickermailingtoupsummary" type="text" 
          style=" position: relative;"> <span 
          class="input-group-addon"><i 
          class="glyphicon glyphicon-time"></i></span> 
        </div> 

但它返回

你，我可以得到相同的高度。

Answer 1

你只是忘記了pply引導類form-control到輸入字段。只需添加類爲：

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="input-group bootstrap-timepicker timepicker"> 
 
    <input id="timepickermailingtoupsummary" type="text" class="form-control" style=" position: relative;" /> 
 
    <span class="input-group-addon"> 
 
     <i class="glyphicon glyphicon-time"></i> 
 
    </span> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

JSfiddle Demo

Answer 2

您需要的類form-control添加到您的輸入：

<input id="timepickermailingtoupsummary" type="text" class="form-control"> 

而且有3倍班級的規模以及。

body { 
 
    padding-top: 50px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <h2 class="well well-sm">Default</h2> 
 

 
    <div class="input-group bootstrap-timepicker timepicker"> 
 
    <input id="timepickermailingtoupsummary" type="text" class="form-control"> <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span> 
 

 
    </div> 
 
    <hr> 
 
    <h2 class="well well-sm">Small</h2> 
 

 
    <div class="input-group bootstrap-timepicker timepicker input-group-sm"> 
 
    <input type="text" class="form-control"> <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span> 
 

 
    </div> 
 
    <hr> 
 
    <h2 class="well well-sm">Large</h2> 
 

 
    <div class="input-group bootstrap-timepicker timepicker input-group-lg"> 
 
    <input type="text" class="form-control"> <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span> 
 

 
    </div> 
 
</div>

Answer 3

這將幫助你..

演示：http://jsfiddle.net/qW2wL/142/

<div class="input-append bootstrap-timepicker-component"> 
<input type="text" class="timepicker-value input-small" value="12:42 PM"> 
<span class="add-on"> 
    <i class="icon-time"></i> 
</span> 
</div>