引导滑块，将值排列在右侧

Question

我想将滑块的值显示在滑块的右侧而不是下方。如果将div移至列，则滑块不起作用。 我正在使用带有目的主题的bootstrap 4。 任何帮助表示赞赏。

<div class="col-4">

                <!-- slider START -->

    <div class="input-slider-container mb-5">
        <div id="input-slider-red" class="input-slider input-slider--blue" data-range-value-min="10" data-range-value-max="100"></div>
        <span id="input-slider-red-value" class="range-slider-value" data-range-value-low="25"></span><span>&nbsp;miles</span>
    </div>     

                <!--slider END -->

screenshot

Answer 1

您需要使用引导程序或您自己的CSS形式提供的实用程序类。

<div class="input-slider-container mb-5 d-flex">
        <div id="input-slider-red" class="input-slider input-slider--blue" data-range-value-min="10" data-range-value-max="100"></div>
        <span id="input-slider-red-value" class="range-slider-value" data-range-value-low="25"></span><span>&nbsp;miles</span>
    </div>

尝试将d-flex添加到您的input-slider-container细分中。