如何更改引導程序 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' />