Question

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

我在jsfiddle下面创建，但无法将“标题”列和滑块放在同一行中。（无换行符）

我尝试使用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

感谢您的帮助。

谢谢

鲁西

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/

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

1 个答案: