Bootstrap - 当屏幕尺寸较小时删除图形的填充或边距答案

【问题标题】：Bootstrap - Removing padding or margin for figures when screen size is smallerBootstrap - 当屏幕尺寸较小时删除图形的填充或边距
【发布时间】：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"
                alt="Taking up Water with a Spoon"
                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的屏幕上删除它？

【问题讨论】：

标签： html css bootstrap-4

【解决方案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" alt="Wild Landscape" />
</body>
</html>

【讨论】：

【解决方案3】：

使用媒体查询，默认情况下，Bootstrap 会在 480px 处调整正文、容器和导航栏的边距/填充。

@media(max - width: 480 px) {
   ...
}

【讨论】：