我正在努力创建这个布局一个dessktop和它的移动等效与Bootsrap
有没有一个简单的方法可以做到这一点？我尝试了所有我可以与容器和成千上万的可能性，但每次，移动部分很容易，但我不能实现我想在桌面上。谢谢你的帮助和建议
s4n0splo1#
给你...
.col-sm-6 .row>* { border: 1px solid black; } .col-12 { height: 150px; } .col-sm-12:first-of-type { height: 100px; } .col-sm-12:last-of-type { height: 200px; } @media only screen and (max-width: 575px) { .col-sm-12 { height: 200px !important; } }
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> <div class="row"> <div class="col-sm-6"> <div class="row"> <div class="col-12 d-flex justify-content-center align-items-center">Div 1</div> <div class="col-12 d-flex justify-content-center align-items-center">Div 2</div> </div> </div> <div class="col-sm-6"> <div class="row"> <div class="col-sm-12 col-6 d-flex justify-content-center align-items-center">Div 3A</div> <div class="col-sm-12 col-6 d-flex justify-content-center align-items-center">Div 3B</div> </div> </div> </div>
1条答案
按热度按时间s4n0splo1#
给你...