Bootstrap 4：僅一列的最小寬度

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

最簡單的方法是在右側使用自動布局列（ .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-*用於此類工作。 很難正確顯示。

檢查下面的代碼段。

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