我使用经典的bootsrtap css来创建一个范围。我想显示最小值和最大值，如上图所示。
只是作为文字解释[min value] [range bar/slider] [max value]
作为一条直线。
但是我的代码显示了三行[min value][range bar/slider][max value]
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Range Input Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="rangeInput">Range Input</label>
22 <input type="range" value="30" id="rangeInput" oninput="this.nextElementSibling.value = this.value"> 222
<output>30</output>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>感谢你的帮助.
编辑：谢谢你的回答。但我已经添加了显示当前值。但无法使其工作。
1条答案
按热度按时间piztneat1#
你可以用一个弹性盒子。不幸的是，我不认为Bootstrap 3.2有内置的类（如果我错了，请纠正我），所以你必须使用样式标签，但最终的工作原理是一样的。
您的代码将变为：