如何垂直转换一系列 Bootstrap？答案

【问题标题】：How I can transform a range of Bootstrap in vertical?如何垂直转换一系列 Bootstrap？
【发布时间】：2021-10-21 05:48:17
【问题描述】：

我有以下代码在 Bootstrap 中创建水平范围：

<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

我需要知道如何在垂直“范围”内转换它。

【问题讨论】：

一个“快速”的解决方案可能是使用 css 旋转元素 style="transform: rotate(90deg);"
谢谢，我试试这个代码
它没有按预期工作，我已经在 codeply 上进行了测试...

标签： user-interface components user-experience bootstrap-5

【解决方案1】：

试试下面的代码，看看它是否能解决你的问题：

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

&lt;input type="range" orient="vertical" /&gt;

【讨论】：