本质上,我试图通过 Bootstrap 创建一个图片库,在大屏幕上有3列,在移动的上有2列。我想保持每张图片的长宽比,但有一个固定的宽度,以便它们在列内对齐。我是一个新手,但我设法实现了大屏幕上的外观。当它在移动设备上时,问题来了。虽然它确实遵循预期的格式,最后一列基本上只是堆叠在第一列下面。我想我可能需要重做我的整个方法,因为我想图像基本上填补了任何可用的空间。我已经尝试了其他类似的职位在这里,但问题是,他们的图像有类似的长宽比。解决方案可能不是 Bootstrap ,但我不知道确切的地方继续下去。
这是我的尝试:
<div class="container">
<div class="row">
<div class="break"></div>
<h4 class="headline text-center">illustrations.</h4>
<div class="break"></div>
<div class="col-md-4 fcontainer">
<div class="row iframe">
<img class="item" src="Assets/Illustrations/Test3.jpg" alt="Test6">
</div>
<div class="row iframe">
<img class="item" src="Assets/Illustrations/Test4.jpg" alt="Test5">
</div>
<div class="row iframe">
<img class="item" src="Assets/Illustrations/Test6.jpg" alt="Test4">
</div>
<div class="row iframe">
<img class="item" src="Assets/Illustrations/Test1.jpg" alt="Test3">
</div>
<div class="row iframe">
<img class="item" src="Assets/Illustrations/Test5.jpg" alt="Test2">
</div>
<div class="row iframe">
<img class="item" src="Assets/Illustrations/Test2.jpg" alt="Test1">
</div>
</div>
<--! multiply above div 2 more times for 3 columns -->
</div>
</div>
<div class="break"></div>
2条答案
按热度按时间ngynwnxp1#
col-4
用于移动的显示器,col-md-6
用于其他大屏幕显示器。https://getbootstrap.com/docs/5.3/layout/grid/#grid-optionsholgip5t2#
这是纯粹的
css
而不是bootstrap
。希望这有帮助。如果你有任何问题,请在下面评论。使用
media queries
可自定义个性化屏幕尺寸