在移動視圖中對齊Bootstrap 4列
[英]Align bootstrap 4 columns in mobile view
問題描述
我需要將列和行對齊到相同的高度和相同的位置。 我在桌面視圖中進行了管理，但現在在移動視圖中出現了問題。
我附加了3張圖片，第一張是正確的桌面視圖。 第二個是移動視圖，第三個是我想要的正確的移動視圖。
<div class="container">
<div class="row align-items-start">
<div class="col-md">
<h2>Környezetvédelem</h2>
</div>
<div class="col-md">
<h2>Történetünk</h2>
</div>
<div class="col-md">
<h2>Kapcsolat</h2>
</div>
</div>
<div class="row align-items-center">
<div class="col-md ">
<img class="img-fluid indep-sub-image" src="img/indep-menu/kornyezetvedelem.jpg">
</div>
<div class="col-md">
<img class="img-fluid indep-sub-image" src="img/indep-menu/tortenetunk.jpg">
</div>
<div class="col-md">
<img class="img-fluid indep-sub-image" src="img/indep-menu/kapcsolat.jpg">
</div>
</div>
</div>
我希望在桌面視圖中保持正確的行，即使標題占兩行，但同時我希望在移動視圖中保持正確的順序。
3 個解決方案
解決方案1
1 2019-06-10 10:52:48
不要將兩行分開，而應使用一行。在標題下方添加要顯示的圖像。 希望這對您有用。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row align-items-start"> <div class="col-md-4"> <h2>Környezetvédelem</h2> <img class="img-fluid indep-sub-image" src="img/indep-menu/kornyezetvedelem.jpg"> </div> <div class="col-md-4"> <h2>Történetünk</h2> <img class="img-fluid indep-sub-image" src="img/indep-menu/tortenetunk.jpg"> </div> <div class="col-md-4"> <h2>Kapcsolat</h2> <img class="img-fluid indep-sub-image" src="img/indep-menu/kapcsolat.jpg"> </div> </div> </div> </body> </html>
解決方案2
0 2019-06-10 10:58:10
請嘗試此解決方案。
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Környezetvédelem</h2>
<img class="img-fluid indep-sub-image" src="img/indep-menu/kornyezetvedelem.jpg">
</div>
<div class="col-md-4">
<h2>Történetünk</h2>
<img class="img-fluid indep-sub-image" src="img/indep-menu/tortenetunk.jpg">
</div>
<div class="col-md-4">
<h2>Kapcsolat</h2>
<img class="img-fluid indep-sub-image" src="img/indep-menu/kapcsolat.jpg">
</div>
</div>
</div>
解決方案3
0 2019-06-10 11:47:22
<div class="container">
<div class="row align-items-start">
<div class="col-md-4 col-sm-4">
<h2>Környezetvédelem</h2>
</div>
<div class="col-md-4 col-sm-4">
<h2>Történetünk</h2>
</div>
<div class="col-md-4 col-sm-4">
<h2>Kapcsolat</h2>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-4 col-sm-4">
<img class="img-fluid indep-sub-image" src="img/indep-menu/kornyezetvedelem.jpg">
</div>
<div class="col-md-4 col-sm-4">
<img class="img-fluid indep-sub-image" src="img/indep-menu/tortenetunk.jpg">
</div>
<div class="col-md-4 col-sm-4">
<img class="img-fluid indep-sub-image" src="img/indep-menu/kapcsolat.jpg">
</div>
</div>
</div>
CSS：Bootstrap Mobile 對齊行上的兩列
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.