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

【问题标题】：How to move slick slider and my div in same line如何在同一行中移动光滑的滑块和我的 div
【发布时间】：2019-08-05 20:25:07
【问题描述】：

我正在尝试首先实现一个带有标题信息的 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

感谢您的帮助。

谢谢

拉什

【问题讨论】：

标签： html bootstrap-4 slider carousel

【解决方案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/

【讨论】：

谢谢大卫，这很简单，但我没有想到。我标记为答案。我还需要一个帮助，我最初的想法是让它响应并在移动设备上将滑块减少到仅 2 列。它在您的 JSFiddle 中的工作方式与此类似，但第一个固定列占用了整个空间并且没有提供响应能力。如果你能帮助我，那就太好了。
我更新了你的小提琴并使用 col-xs 但没有运气，在移动设备中它仍然进入下一行。任何事情都可以提供帮助。 jsfiddle.net/rushijoshi/hnjteL9p
@RushikeshJoshi：对不起，我没有得到你想要的。因此，您希望将第一个固定列和缩小的滑块保留在移动设备的同一行中？
是的，大卫，你是对的。您提供的解决方案不是将滑块和固定的东西放在一条线上。尽管我的移动滑块减少到 2 张幻灯片，但它们仍然以两行显示。手机端打开即可查看：jsfiddle.net/rushijoshi/hnjteL9p/embedded/result
@RushikeshJoshi：我已经更新了帖子。看看这是否适合你。