Bootstrap 列未出現在較小的屏幕上

Question

我開發了一個有 3 列的grid 。 我的問題是列縮小太多，並且在以較小的尺寸調整它們時無法正確顯示內容。

有沒有辦法實現一個斷點，這樣當大約1000px的屏幕測量到達時，將所有內容傳遞到單個列？

當我達到移動尺寸時出現另一個問題，最后兩列（在圖像中突出顯示）消失。 這些應該出現在第一列下

我該如何解決我的問題，我做錯了什么？

演示

代碼

<div class="container-fluid"
    style="overflow-x:hidden;padding-left:0;display:flex; height: 98vh; margin-right:0px; margin-left:0px">
    <div class="col-md-6 col-sm-12 customcol">
        <div class="card card1">
            <div class="card-body">
                <p class="card-text">1asdas</p>
            </div>
        </div>
        <div class="divh" style="justify-content: flex-start; display: flex">
            <div class="card card2">
                <div class="card-body">
                    <p class="card-text">2aasasddsd</p>
                </div>
            </div>
            <div class="card card2">
                <div class="card-body">
                    <p class="card-text">3asd</p>
                </div>
            </div>
        </div>
        <div class="divh" style="justify-content: flex-start; display: flex">
            <div class="card card2">
                <div class="card-body">
                    <p class="card-text">4asdasd</p>
                </div>
            </div>
            <div class="card card2">
                <div class="card-body">
                    <p class="card-text">5asda</p>
                </div>
            </div>
        </div>
        <div class="divh" style="justify-content: flex-start; display: flex">
            <div class="card card4" style="height:100%">
                <div class="card-body">
                    <p class="card-text">6asda</p>
                </div>
            </div>
            <div class="card card4" style="height:100%">
                <div class="card-body">
                    <p class="card-text">7asd</p>
                </div>
            </div>
            <div class="card card4" style="height:100%">
                <div class="card-body">
                    <p class="card-text">8asdasd</p>
                </div>
            </div>
            <div class="card card4" style="height:100%">
                <div class="card-body">
                    <p class="card-text">9asdsad</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 customcol">
        <div class="card card1">
            <div class="card-body">
                <p class="card-text">10asd</p>
            </div>
        </div>
        <div class="card card1">
            <div class="card-body">
                <p class="card-text">11asdas</p>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 customcol">
        <div class="card cardall">
            <div class="card-body">
                <p class="card-text">12asd</p>
            </div>
        </div>
    </div>
</div>

問題

Answer 1

問題是您使用col沒有row 。

當你需要使用列時，必須有一些行作為它的父行，它在Bootstrap 的官方文檔中定義

 .card{ margin-top: 16px; margin-left: 16px; } .card-body{ padding:4px; } .card1{ height: calc(50% - 16px) } .divh{ height: calc(16.7% - 16px); margin-top: 16px; } .card2{ width: calc(50% - 16px); margin-top:0px; height:100%; } .card4{ width: calc(25% - 16px); margin-top:0px; height:100%; } .cardall{ height: calc(100% - 16px) } .customcol{ padding-left: 0; padding-right: 0; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid" style="padding-left:0; height: 98vh;"> <div class="row"> <div class="col-md-4 col-sm-12 customcol"> <div class="card card1"> <div class="card-body"> <p class="card-text">1asdas</p> </div> </div> <div class="divh" style="justify-content: flex-start; display: flex"> <div class="card card2" > <div class="card-body"> <p class="card-text">2aasasddsd</p> </div> </div> <div class="card card2"> <div class="card-body"> <p class="card-text">3asd</p> </div> </div> </div> <div class="divh" style="justify-content: flex-start; display: flex"> <div class="card card2"> <div class="card-body"> <p class="card-text">4asdasd</p> </div> </div> <div class="card card2"> <div class="card-body"> <p class="card-text">5asda</p> </div> </div> </div> <div class="divh" style="justify-content: flex-start; display: flex"> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">6asda</p> </div> </div> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">7asd</p> </div> </div> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">8asdasd</p> </div> </div> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">9asdsad</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-12 customcol"> <div class="card card1"> <div class="card-body"> <p class="card-text">10asd</p> </div> </div> <div class="card card1"> <div class="card-body"> <p class="card-text">11asdas</p> </div> </div> </div> <div class="col-md-4 col-sm-12 customcol"> <div class="card cardall"> <div class="card-body"> <p class="card-text">12asd</p> </div> </div> </div> </div> </div>

Answer 2

 .card{ margin-top: 16px; margin-left: 16px; } .card-body{ padding:4px; } .card1{ height: calc(50% - 16px) } .divh{ height: calc(16.7% - 16px); margin-top: 16px; } .card2{ width: calc(50% - 16px); margin-top:0px; height:100%; } .card4{ width: calc(25% - 16px); margin-top:0px; height:100%; } .cardall{ height: calc(100% - 16px) } .customcol{ padding-left: 0; padding-right: 0; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid" style="padding-left:0; height: 98vh;"> <div class="row"> <div class="col-md-4 col-sm-12 customcol"> <div class="card card1"> <div class="card-body"> <p class="card-text">1asdas</p> </div> </div> <div class="divh" style="justify-content: flex-start; display: flex"> <div class="card card2" > <div class="card-body"> <p class="card-text">2aasasddsd</p> </div> </div> <div class="card card2"> <div class="card-body"> <p class="card-text">3asd</p> </div> </div> </div> <div class="divh" style="justify-content: flex-start; display: flex"> <div class="card card2"> <div class="card-body"> <p class="card-text">4asdasd</p> </div> </div> <div class="card card2"> <div class="card-body"> <p class="card-text">5asda</p> </div> </div> </div> <div class="divh" style="justify-content: flex-start; display: flex"> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">6asda</p> </div> </div> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">7asd</p> </div> </div> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">8asdasd</p> </div> </div> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">9asdsad</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-12 customcol"> <div class="card card1"> <div class="card-body"> <p class="card-text">10asd</p> </div> </div> <div class="card card1"> <div class="card-body"> <p class="card-text">11asdas</p> </div> </div> </div> <div class="col-md-4 col-sm-12 customcol"> <div class="card cardall"> <div class="card-body"> <p class="card-text">12asd</p> </div> </div> </div> </div> </div>