Bootstrap 列不会出现在较小的屏幕上

Question

我开发了一个grid有 3 列的。我的问题是，当列调整为较小尺寸时，列收缩太多并且无法正确显示内容。有没有办法实现断点，以便当屏幕测量大约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>问题

Answer 1

问题是你使用的是没有.colrow

当您需要使用列时，必须有一些行作为其父级，其在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>