如何更改引导程序 slider 的大小？

Question

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

我正在使用 Bootstrap slider 来自

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

我尝试使用 css 对其进行更改，但效果不佳。

如何更改 slider 的宽度和高度？

我希望最终大小几乎是当前大小的 4 倍。

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

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

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

Answer 1

您正在添加错误的滑块类来设置宽度。您需要在类.slider.slider-horizontal添加自定义宽度，其中bootstrap设置默认宽度。将以下类添加到您的小提琴中，您可以在px中设置宽度或以％或视口单位为大众。 它会将大小增加到该值。

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

希望这可以帮助。

Answer 2

使用以下css

.slider.slider-horizontal{
 width:1200px !important;
 }

希望能帮助到你。

Answer 3

我有同样的问题，但在同一站点需要不同的尺寸。 我的解决方案是为该元素添加一个 ID，然后在 css 上添加该 ID：

 #MYSliderID.slider.slider-horizontal { width: 80px; height: 20px; }

 <div class='col-sm-4 col-md-1'> <input id='MyInputID' type='text' data-slider-min='0' data-slider-max='10' data-slider-step='0.05'data-slider-value='0' data-slider-id='MYSliderID' />