在移动视图中对齐Bootstrap 4列
[英]Align bootstrap 4 columns in mobile view
问题描述
I need to align my columns and rows to same height and same position. 
我需要将列和行对齐到相同的高度和相同的位置。 I managed it in desktop view but now I have problems in mobile view. 我在桌面视图中进行了管理，但现在在移动视图中出现了问题。
I attached 3 images, the first is the correct desktop view. 我附加了3张图片，第一张是正确的桌面视图。 Second is the mobile view and the third is the correct mobile view I want. 第二个是移动视图，第三个是我想要的正确的移动视图。
https://imgur.com/a/VmaSzrH https://imgur.com/a/VmaSzrH
<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>
I want to keep the correct lines in desktop view, even when the title takes two line but at the same time I want the correct order in mobile view. 我希望在桌面视图中保持正确的行，即使标题占两行，但同时我希望在移动视图中保持正确的顺序。
3 个解决方案
解决方案1
1 2019-06-10 10:52:48
Don't make two separate rows, instead use one row.Below your heading add the image that you want to display. 不要将两行分开，而应使用一行。在标题下方添加要显示的图像。 Hope this works for you. 希望这对您有用。
<!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
Please try this solution. 请尝试此解决方案。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.