Bootstrap - 当屏幕尺寸较小时删除图形的填充或边距
Posted
技术标签:
【中文标题】Bootstrap - 当屏幕尺寸较小时删除图形的填充或边距【英文标题】：Bootstrap - Removing padding or margin for figures when screen size is smaller 【发布时间】：2022-01-18 01:46:39 【问题描述】：我正在尝试在小型设备上制作覆盖整个屏幕（没有边距或填充）的图像。不幸的是，on this post 提出的技术对我不起作用。
这是我目前拥有的代码。 （在https://jsfiddle.net/ 上测试）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-9">
<div class="image-wraper">
<figure class="figure">
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(73).jpg"
class="figure-img img-fluid rounded shadow-3 mb-1"
style="height: 100%; width: 100%; object-fit: cover;"
/>
<figcaption class=" figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
</div>
<div class="col-md-3">
...
</div>
</div>
</div>
</body>
</html>
左右还有边距。如何在小于或等于sm的屏幕上删除它？
【问题讨论】：
【参考方案1】：图片完全填满了屏幕，但是由于纵横比与屏幕的纵横比不完全匹配，我得到了以下结果。我还通过取消 Bootstrap 链接来应用我自己的风格。可以测试一下吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body
margin: 0px !important;
img
position: absolute;
width: 100%;
.img-fluid
max-width: 100%;
height: auto;
.figure-style
margin: 0px !important;
</style>
</head>
<body>
<div class="row align-items-center">
<div class="col-lg-12">
<figure class="figure-style">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(73).jpg"/>
</figure>
</div>
</div>
</body>
</html>
应用测试图片如下：
【讨论】：
谢谢@Sercan。这有效地覆盖了整个屏幕。但我忘了说它应该在<div class="col-md-9"> 内。
只是为了仔细检查@Kyv ...。如果您将它放在col-9 中，那么默认情况下它永远不会拉伸整个屏幕宽度，而只会拉伸它的四分之三...例如正如@SercanSebetçi 在上面的代码中建议的那样，12 个可能的列中的 col-9 和 12 个将是全宽全宽【参考方案2】：
如果您在 Bootstrap 5 中有适合浏览器屏幕纵横比的图像，则可以应用以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</style>
</head>
<body>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg" class="img-fluid" />
</body>
</html>
【讨论】：
【参考方案3】：使用媒体查询，默认情况下，Bootstrap 会在 480px 处调整正文、容器和导航栏的边距/填充。
@media(max - width: 480 px)
...
【讨论】：
以上是关于Bootstrap - 当屏幕尺寸较小时删除图形的填充或边距的主要内容，如果未能解决你的问题，请参考以下文章
具有 vw 和 vh 的响应式网站，当屏幕太小时，尺寸保持相同的尺寸 (px)