Bootstrap 4: Min-width only for one column

Question

我用 Bootstrap 4.

创建了一个基本的基于网格的布局

我有两列：左列和右列。左边一列是div.col-12.col-md-5，右边一列是div.col-12.col-md-7。问题是，左列内部有一个 table，因为 table 不是可调整大小的，所以我希望左列的最小宽度为 460px（因此 table 中的数据可以总是被正确看到）。但我确实希望右边的另一列能够完全响应并且它不断调整大小（直到屏幕大小 < md 断点 -768px-）。

我的布局看起来像这样：

为了实现这种行为，我创建了 css:

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

并且我已将 .min-width-460-md class 应用到左列。所以我的 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>

问题是，将这个新的 class 应用于左栏后，当它达到 460px 时，它会停止调整大小（如我所愿），但右栏位于左栏下方，如下所示:

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

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

提前致谢！

Answer 1

将 col-md-5 和 col-md-7 都更改为 col-md 并删除您的自定义 min-width-460-md。 col-md 将在较小的屏幕上自动调整为 table 宽度，并在屏幕变大时使两列宽度相等。

对于大屏幕，将 col-xl-5 class 添加到 table 列。

单击下面的 "run code snippet" 按钮并展开到整页：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="container-fluid">
    <div class="row">
        <div class="col-12 col-md col-xl-5 bg-secondary"> 
            The following line will give this div 460px min-width. <br>
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
           <br>
            First column (left) which contains a table and needs to be min-width 460px.
        </div>
        <div class="col-12 col-md bg-warning">
            Second column (it contains more resizable data, so no min-width required here). Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex totam qui voluptatibus reiciendis possimus laboriosam dolor libero alias quasi sequi at voluptas, porro, obcaecati amet minima fuga consectetur facilis eligendi.
        </div>
    </div>
</section>

Answer 2

这是个简单的问题。您不能将 col-* col-md-* 用于此类工作。很难正常显示。

检查下面的代码段。

.new-section{
background-color: black;
color: white;
padding: 30px;
}
.new-section .row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
@media (min-width: 768px){
.new-section .row{
-ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
}
.new-section .row .min-width-460-md,
.new-section .row .right-column{
padding-left: 15px;
padding-right: 15px;
}
.new-section .row .min-width-460-md{
border: 1px solid #f2f2f2;
-ms-flex-preferred-size: 100%;
    flex-basis: 100%;
-webkit-box-flex: 0;
    -ms-flex-positive: 0;
        flex-grow: 0;
-ms-flex-negative: 0;
    flex-shrink: 0;
}
@media (min-width: 768px){
.new-section .row .min-width-460-md{
-ms-flex-preferred-size: 460px;
    flex-basis: 460px;
}
}
.new-section .row .right-column{
width: 100%;
}

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

这不是 bootstra@4 的正确解决方案。这个片段是你所期望的。下面是 bootstrap@4 解决方案的代码。

@media (min-width: 768px) {
        .min-width-460-md {
            flex-basis: 460px !important;
            max-width: 460px !important;
        }
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

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

Answer 3

最简单的方法是使用右侧的 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

Bootstrap 4: Min-width only for one column

Bootstrap 4: Min-width only for one column

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4