如何使引导列可水平滚动答案

【问题标题】：How to make a bootstrap column scrollable horizontally如何使引导列可水平滚动
【发布时间】：2020-12-02 08:05:45
【问题描述】：

我想让.right-col 水平滚动（float-div 元素不能被包裹）

<main class="container-fluid">
    <div class="row">
        <div class="col-auto left-col">
            it's actually the sidebar
        </div>
        <div class="col right-col">
            <div class="float-right float-div">here is main content which is float</div>
            <div class="float-right float-div">here is main content which is float</div>
            <div class="float-right float-div">here is main content which is float</div>
            <div class="float-right float-div">here is main content which is float</div>
            <div class="float-right float-div">here is main content which is float</div>
            <div class="float-right float-div">here is main content which is float</div>
            <div class="float-right float-div">here is main content which is float</div>
            <div class="float-right float-div">here is main content which is float</div>
            <div class="float-right float-div">here is main content which is float</div>
        </div>
    </div>
</main>

【问题讨论】：

标签： bootstrap-4 horizontal-scrolling

【解决方案1】：

在col 上使用d-flex flex-nowrap，在div 上使用text-nowrap...

<main class="container-fluid">
    <div class="row">
        <div class="col-auto left-col">
            it's actually the sidebar
        </div>
        <div class="col right-col d-flex flex-nowrap">
            <div class="float-div text-nowrap">here is main content which is float</div>
            <div class="float-div text-nowrap">here is main content which is float</div>
            <div class="float-div text-nowrap">here is main content which is float</div>
            <div class="float-div text-nowrap">here is main content which is float</div>
            <div class="float-div text-nowrap">here is main content which is float</div>
            <div class="float-div text-nowrap">here is main content which is float</div>
            <div class="float-div text-nowrap">here is main content which is float</div>
            <div class="float-div text-nowrap">here is main content which is float</div>
            <div class="float-div text-nowrap">here is main content which is float</div>
        </div>
    </div>
</main>

Responsive demo

【讨论】：