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

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*/
}

希望这有帮助。

Answer 2

使用以下css

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

希望它有所帮助。