我的目标是每行显示4个图像。代码如下:
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
</div>
</div>
我也希望看到基于Bootstrap的列样式调整大小的图像,但我得到的是重叠的完整图像。
有什么线索吗?
7条答案
按热度按时间omqzjyyz1#
尝试将以下内容添加到样式表中:
**更新:**作为一种替代方案(正如@JasonAller在回答中的评论所指出的),你可以将
class="img-responsive"
添加到每个img
元素中。这会将max-width: 100%;
和height: auto;
应用到图像中,这样它就可以很好地缩放到父元素中。更多信息请参见Bootstrap文档。bootstrap v4更新
Bootstrap v4的类名为
img-fluid
Bootstrap v4 docs
uklbhaso2#
对于Bootstrap 4,您必须使用use class=“img-fluid”,class=“img-responsive”将在3.x中工作。
0h4hbjxa3#
有时,在动态内容上,当您无法控制用户输入的内容时,class=“img-responsive”将无法工作。100%'对每个图像也是棘手的。所以我使用:
xbp102n04#
请注意,引导数据行也会有填补;这可能是意料之外的。
以下内容:
对我有用。
kkbh8khc5#
如果需要,可以在html元素中使用width标记,例如:
我发现它更有用,因为你可以玩百分比,直到你有想要的大小。
bprjcwpo6#
解决这个问题的方法是使用
<picture>
和<source>
标记。只要确保为不同的屏幕准备了不同大小的图像。https://www.w3schools.com/tags/att_source_media.asp
7z5jn7bk7#
Bootstrap 5的一般解。我在答案的最后添加了OP问题的一个特殊解。
在某些情况下,调整大小似乎不是一件容易的事情。我还没有在BS 5中找到任何使用Bootstrap类来调整特定图像大小的内置实现。
我发现的最佳解决方案是像处理其他HTML元素(
span
或div
元素)一样处理图像。一般解决方案
使用此代码段
注意:这只是一个一般性的例子,根据你的需要进行调整。
解释(或多或少会发生这种情况)
img-fluid
:映像已响应。这将应用max-width:100%;以及高度:auto;添加到图像,使其与父宽度一起缩放。mx-auto
:在手机视图中,将图像在水平轴上居中。左右边距设置为自动mx-lg-0
:当达到lg断点时,两边的边距设置为0。h-100
:图像高度设置为相对于父级的100%。这应保持正确的纵横比。col-8
:在最小屏幕尺寸下,图像将占用8列。col-sm-6
:在小屏幕断点之后(参见以下部分的链接),图像将占据6列。col-md-4
:在中等尺寸屏幕上,4列。col-lg-1
:在大尺寸屏幕上,1列。my-auto
:用于垂直居中(可选)。记住,你要根据自己的意愿和喜好来设置纵队。
结果
此问题的解决方案
代码的主要问题是缺少类。请记住:Bootstrap主要是关于正确使用类。如果你在放入你自己的CSS代码之前正确使用了内置类,你应该三思而后行。
对于不同屏幕尺寸下的响应,请参阅上面的通用解决方案。
链接