如何在同一行中移动光滑的滑块和我的div

Question

我试图首先实现带有标题信息的HTML滑块。

我在jsfiddle下面创建但是我无法将Heading列和滑块放在同一行。 （没有换行）

我尝试使用col-md但它没有帮助。

<div class="col-md-1 text-right my-2">
    <table />
</div>
<div class="col-md-11 my-2">
    <slider />
</div>

https://jsfiddle.net/rushijoshi/hb2aot65/7/

预期输出，请参见图片：Expected Output

我感谢您的帮助。

谢谢

Ru是

Answer 1

只需将row类添加到其父级<div>？

<div class="row">
    <div class="col-md-1 text-right my-3">
        <table />
    </div>
    <div class="col-md-10 m-3">
        <slider />
    </div>
</div>

https://jsfiddle.net/davidliang2008/ht4beqcx/3/

如果您希望将固定的左列和滑块保持在一行中，则需要将flex-nowrap添加到该行以使该行不可包装：

<div class="row flex-nowrap">
    <div class="col-2 text-right my-3">
        <table />
    </div>
    <div class="col-9 my-3 mx-auto">
        <slider />
    </div>
</div>

https://jsfiddle.net/davidliang2008/ht4beqcx/12/