我開發了一個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>問題
1 回答
白衣染霜花
TA貢獻1796條經驗 獲得超10個贊
問題是你使用的是沒有.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" >
<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>
狐的傳說
TA貢獻1804條經驗 獲得超3個贊
.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 關注
- 241 瀏覽
添加回答
舉報
0/150
提交
取消