Bootstrap 4：仅一列的最小宽度

Question

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

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

最简单的方法是在右侧使用自动布局列 ( .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