gpt4 book ai didi

CSS bootstrap keep at least 2 columns(Css引导至少保留2列)

翻译 作者:bug小助手 更新时间:2023-10-26 22:37:57 25 4
gpt4 key购买 nike



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


更多回答

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com