我開(kāi)發(fā)了一個(gè)grid有 3 列的。我的問(wèn)題是，當(dāng)列調(diào)整為較小尺寸時(shí)，列收縮太多并且無(wú)法正確顯示內(nèi)容。有沒(méi)有辦法實(shí)現(xiàn)斷點(diǎn)，以便當(dāng)屏幕測(cè)量大約1000px到達(dá)時(shí)，將所有內(nèi)容傳遞到單個(gè)列？當(dāng)我達(dá)到移動(dòng)尺寸時(shí)，出現(xiàn)另一個(gè)問(wèn)題，最后兩列（在圖像中突出顯示）消失。這些應(yīng)該出現(xiàn)在第一列下我該如何解決我的問(wèn)題以及我做錯(cuò)了什么？演示版代碼<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>問(wèn)題
1 回答
白衣染霜花
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊
問(wèn)題是你使用的是沒(méi)有.colrow
當(dāng)您需要使用列時(shí)，必須有一些行作為其父級(jí)，其在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" >
<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>
狐的傳說(shuō)
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊
.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>
- 1 回答
- 0 關(guān)注
- 258 瀏覽
添加回答
舉報(bào)
0/150
提交
取消