css - Bootstrap 4 : Min-width only for one column

Question

我已经使用 Bootstrap 4 创建了一个基本的基于网格的布局。

我有两列:左列和右列。左列是 div.col-12.col-md-5，右列是 div.col-12.col-md-7。事情是，左列里面有一个表格，因为表格不是可调整大小的，所以我希望左列的最小宽度为 460px(这样表格中的数据总是可以正确看到)。但我确实希望右侧的另一列能够完全响应并不断调整大小(直到屏幕大小 < md breakpoint -768px-)。

我的布局看起来像这样:

为了尝试实现这种行为，我创建了这段 CSS:

@media (min-width: 768px) {
    .min-width-460-md {
        min-width: 460px;
    }
}

我已将 .min-width-460-md 类应用到左列。所以我的 html 代码看起来像下一个代码:

<section class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-5 min-width-460-md">
            First column (left) which contains a table and needs to be min-width 460px.
        </div>
        <div class="col-12 col-md-7">
            Second column (it contains more resizable data, so no min-width required here).
        </div>
    </div>
</section>

问题是，将这个新类应用于左列时，当它达到 460px 时，它会停止调整大小(如我所愿)，但右列位于左列下方，如下所示:

我显然不希望这种情况发生。我真正想要的是，当左列达到 460px 时，它停止调整大小，但右列继续调整大小，直到屏幕达到小于 768px -md-(然后两列都将是 col-12)。

有没有办法用 css + Bootstrap 4 做到这一点？

提前致谢!

Answer 1

最简单的方法是使用 auto-layout右侧的列 (.col)...

<section class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-5 min-width-460-md border">
            <table class="table table-striped">
                ..
            </table>
        </div>
        <div class="col bg-dark text-white">
            Second column (it contains more resizable data, so no min-width required here).
        </div>
    </div>
</section>

演示:https://www.codeply.com/go/IB5xTytQAq