I have the following HTML:
我有以下超文本标记语言:
<div class="row">
<div class="col-md-3 col-sm-6">
<img src="image1.jpg" width="80%">
<h4>Text under image 1</h4>
</div>
<div class="col-md-3 col-sm-6">
<img src="image2.jpg" width="80%">
<h4>Text under image 2</h4>
</div>
<div class="col-md-3 col-sm-6">
<img src="image3.jpg" width="80%">
<h4>Text under image 3</h4>
</div>
<div class="col-md-3 col-sm-6">
<img src="image4.jpg" width="80%">
<h4>Text under image 4</h4>
</div>
</div>
The images are all 485x900 pixels. On wide screens, there are 4 columns. If the viewport is smaller, e.g. 1000 pixels, there are 2 columns and if it is very small, e.g. 600 pixels, there is only 1 column.
所有图像都是485x900像素。在宽屏幕上,有4列。如果视区较小,例如1000像素,则有2列,如果非常小,例如600像素,则只有1列。
However, I want to keep at least 2 columns, no matter how small the viewport is. The CSS shall shrink the images to fit.
然而,我想保留至少2列,无论视区有多小。Css将缩小图像以适应需要。
How can I achieve this?
我怎样才能做到这一点呢?
更多回答
.col-6
seems to be what you want if you never want a one columns layout. Also try img-responsive
on the images instead of setting a width
如果您从不想要单列布局,那么.ol-6似乎就是您想要的。也可以尝试对图像进行img响应,而不是设置宽度
优秀答案推荐
Bootstrap is "mobile-first" so always start with the smallest viewport and work up. The classes with no breakpoint in them apply to the smallest viewport and up. The classes with breakpoints apply to that size and up, overriding the smaller breakpoint classes.
Bootstrap是“移动优先”的,所以总是从最小的视口开始,然后逐步增加。其中没有断点的类应用于最小的视口及以上。具有断点的类适用于该大小及以上,覆盖较小的断点类。
Use .col-6.col-md-3
, this will start out half the width of the screen and then break to 25% at the medium breakpoint.
使用.ol-6.ol-md-3,这将从屏幕宽度的一半开始,然后在中断点中断到25%。
<div class="row">
<div class="col-6 col-md-3">
<img src="image1.jpg" width="80%">
<h4>Text under image 1</h4>
</div>
<div class="col-6 col-md-3">
<img src="image2.jpg" width="80%">
<h4>Text under image 2</h4>
</div>
<!-- ... -->
</div>
https://getbootstrap.com/docs/4.6/layout/grid/#mix-and-match
Https://getbootstrap.com/docs/4.6/layout/grid/#mix-and-match
更多回答
我是一名优秀的程序员,十分优秀!