jquery - Twitter Bootstrap - 在输入字段旁边添加内联数字步进器

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>

这对于 slider 来说效果很好，但现在我试图在 slider 旁边放置一个数字步进器。因此:

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

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

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

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 .