引導`輸入組addon`遠沒有輸入的時候`寬度：auto`設置

Question

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
 
<script type="application/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 

 
<form id="form1" class="well form-horizontal" action="/base_url/update" method="POST"> 
 
<div class="form-group"> 
 
    <label class="col-sm-2 control-label" for="input1">Field 1</label> 
 
    <div class="col-sm-10 input-group"> 
 
    <input style="width:auto" id="input1" min="0" name="input1" class="form-control" maxlength="20" value="0" type="number"> 
 
    <span class="input-group-addon">sm<sup>3</sup></span> 
 
    </div> 
 
</div> 
 
</form>

如何使輸入組插件出現在輸入近嗎？

Answer 1

發生這種情況是因爲Bootstrap期待填充「剩餘空間」的輸入。如果你想調整文本框的寬度，你應該改變寬度.input-group而不是輸入。

舉個例子：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script type="application/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 

<form id="form1" class="well form-horizontal" action="/base_url/update" method="POST"> 
<div class="form-group" style="width: 200px"> 
    <label class="col-sm-2 control-label" for="input1">Field 1</label> 
    <div class="col-sm-10 input-group"> 
    <input id="input1" min="0" name="input1" class="form-control" maxlength="20" value="0" type="number"> 
    <span class="input-group-addon">sm<sup>3</sup></span> 
    </div> 
</div> 
</form> 

Answer 2

從元素

<input id="input1" min="0" name="input1" class="form-control" maxlength="20" value="0" type="number"> 

引導刪除style="width:auto"處理，對你的好意，所以沒有理由把它內聯。 :)