将标签添加到HTML范围滑块的末尾

时间:2016-11-18 14:32:50

标签: html5 twitter-bootstrap

我目前正在实施一个范围滑块,并且在滑块的开头有一个标签,位于滑块正上方。此标签代表比例的低端。现在我需要在滑块末端的相同位置添加一个标签,以表示刻度的最高端。但是,我只能将标签显示在刻度的开头但在下面。我正在使用Bootstrap for CSS。

<div class="container">
      <label for="agitated">Agitated</label>
      <input type="range" min="0" max="10" value="5" id="fader">
      </br>

      <label for="happy">Happy</label>
      <input type="range" min="0" max="10" value="5" id="fader">
      </br>

      <label for="tired">Tired</label>
      <input type="range" min="0" max="10" value="5" id="fader">
      </br>

      <label for="scared">Scared</label>
      <input type="range" min="0" max="10" value="5" id="fader">
    </div>

2 个答案:

答案 0 :(得分:2)

<label for="happy" class="pull-left">Happy</label>
<label for="" class="pull-right">Sad</label>
<input type="range" min="0" max="10" value="5" id="fader">
</br>

这样的东西?如果是这些点,只需为每个标签使用引导类pull-leftpull-right

以下是示例:

http://jsbin.com/ziluwuv/1/edit?output

答案 1 :(得分:1)

对于任何想知道@Denisx给出的答案为什么不能与Bootstrap 4.0一起使用的人来说,请直说。使用float-leftfloat-right而不是pull-leftpull-right