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>