Twitter的引导 - 追加数字步进直列旁边的输入字段

Question

我试图实现代码：

https://dl.dropboxusercontent.com/u/233981/Numerical_slider.PNG

经过一番研究，我发现http://loopj.com/jquery-simple-slider/这似乎是一个很好的开始。

到目前为止，我有：

<div class="control-group"> 
<label class="control-label">Label 1</label> 
    <div class="controls">  
    <input type="text" data-slider="true" value="0.6" data-slider-highlight="true" data-slider-theme="volume"> 
    </div> 
</div> 

这滑块工作正常，但现在我试图把滑块旁边的一个数字步进。因此：

<input type="number" class="input-mini" value="60"> 

我一直在摆弄与input-append和help-inline试图让数字步进很好地滑块旁边坐下，但它只是不飞。我不断得到滑块下方显示的<input type="number">字段的一些变化，而不是旁边的变化。

如何将数字输入字段移动到滑块的右侧？

Answer 1

随着下面的CSS（slidernumber是分配给输入字段的类）：

.slidernumber 
{ 
    float: left; 
} 
.slider-volume { 
    margin-top: 5px; 
    float: left; 
} 

的两个小部件然后是侧利用此HTML侧：

<div class="control-group"> 
    <label class="control-label">Label 1</label> 
    <div class="controls smallgroup">  
     <input type="text" data-slider="true" value="0.6" data-slider-highlight="true" data-slider-theme="volume"/> 
     <input type="number" class="input-mini slidernumber" value="60"/> 
    </div> 
</div> 

Fiddle here。