Question

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

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

Answer 2

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

对于大屏幕，请将col-xl-5类添加到表格列。

点击下面的“运行代码段”按钮，然后展开到整页：

<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 3

这是一个简单的问题。您无法使用col-* col-md-*进行此类工作。很难正确显示。

检查下面的代码段。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Bootstrap 4：仅一列的最小宽度

3 个答案: