如何更改引导滑块的大小？

Question

Jsfiddle 链接是 https://jsfiddle.net/gzp0pcot/

我正在使用 Bootstrap 滑块

https://github.com/seiyria/bootstrap-slider

我尝试使用 css 来更改它，但效果不佳。

如何更改滑块的宽度和高度？

我希望最终尺寸几乎是当前尺寸的 4 倍。

我使用检查器更改了以下 css 代码：

.slider.slider-horizontal .slider-track {
    height: 30px;
    width: 200%;
    margin-top: -5px;
    top: 50%;
    left: 0;
}

上面我更改了高度和宽度值，它增加了尺寸，但 200% 没有意义并且无法正常工作。

Answer 1

您添加了错误的滑块类来设置宽度。您需要在引导程序设置默认宽度的类中添加自定义宽度.slider.slider-horizontal。将以下类添加到您的小提琴中，您可以以 px 或 % 或视口设置宽度大众单位。它将把大小增加到该值。

.slider.slider-horizontal{
  width:400px; /* sample value - set it as you like*/
}

希望这可以帮助。