ブートストラップに接尾辞付き入力値を表示

Question

入力値の後に測定単位を表示する必要があるという問題があります。問題は、スタンダードBootstrapのスパンを作成する方法があまりにも多くのスペースを必要とするので、ここでは過剰です。たとえば、次のように

<div class="input-group margin-bottom"> 
    <span class="input-group-addon input-source-observer"><i class="fa fa-trash fa-fw"></i></span> 
    <span class="input-group-addon input-source-observer" style="text-align: right">Persist deleted items for</span> 
    <input type="text" class="form-control" data-parsley-trigger="change" placeholder="1" initial-value="1" value="7" style="text-align: right"> 
    <span class="input-group-addon input-source-observer">days</span> 
    <span class="input-group-btn"> 
     <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Recover"> 
    </span> 
</div> 

ここでは、十分に正常に見えるが、他の場所で、それは本当に醜いです。

HTML5 + CSS3やブートストラップ機能でどうすればいいですか？ HTML

：あなたはinputとinput-group-addonの特性を調整することができる新しいクラスを作成することで

Answer 1

<div class="input-group margin-bottom"> 
    <span class="input-group-addon input-source-observer"><i class="glyphicon glyphicon-trash"></i></span> 
    <span class="input-group-addon input-source-observer" style="text-align: right">Persist deleted items for</span> 
    <input type="text" class="form-control addon-inline" data-parsley-trigger="change" placeholder="1" initial-value="1" value="7" style="text-align: right"> 
    <span class="input-group-addon addon-inline input-source-observer">days</span> 
    <span class="input-group-btn"> 
     <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Recover"> 
    </span> 
</div> 

CSS

.input-group-addon.addon-inline { 
    background: #fff; 
    color: #999; 
    border-left: none; 
    padding-left: 0; 
} 

.input-group .form-control.addon-inline { 
    border-right: none; 
    padding-right: 5px; 
} 

結果：

http://www.bootply.com/BOTmrMi4jV