Bootstrap 如何根据屏幕宽度自动更改页边距

Question

在全屏模式下，我将边距设置为让容器完全适合页面，没有边距：200px in margins in .gallery 容器将太大以适应页面而无需滚动查看它全部

我运行遇到的问题是当屏幕宽度缩小时边距保持不变并使容器不存在

我正在尝试使用@media only screen max-width 来随着屏幕宽度的变化而改变它。但是在尺寸为 367x667（iphone SE 尺寸）时，容器被完全推入。我该如何更改它以使容器仍然显示在这些尺寸上？

  @media only screen and (min-width: 400px) {
    .gallery{
      padding: 0px;
      margin: 40px;
      margin-top: 0px;
      margin-bottom: 0px;
    }
  }

.gallery-dog-img {
  max-height: 100%;
  max-width: 100%;
  cursor: pointer;
  width: 75%;
  height: 75%;
  }

.gallery{
  padding: 40px 40px;
  margin: 200px;
  margin-top: 0px;
  margin-bottom: 0px;
}

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<section class="gallery bg-primary">
  <div class="container-sm dog-gallery-container">
    <div class="row align-items-center g-0 dog-images-row row-cols-1 row-cols-sm-2 row-cols-md-3">
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
    </div>
  </div>
</section>

Answer 1

问题是由于您的元素缺少定义 widths。在您的 section 上添加 w-100 并将 gallery 和 bg-primary 移动到父容器 div.

然后将媒体查询中的 min 更改为 max-width。 max-width 为指定宽度以下的所有尺寸指定样式。

@media only screen and (max-width: 800px) {
  .gallery {
    padding: 0px;
    margin: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
}

.gallery-dog-img {
  max-height: 100%;
  max-width: 100%;
  cursor: pointer;
  width: 75%;
  height: 75%;
}

.gallery {
  padding: 40px 40px;
  margin: 200px;
  margin-top: 0px;
  margin-bottom: 0px;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<section class="w-100">
  <div class="container-sm dog-gallery-container bg-primary gallery">
    <div class="row align-items-center g-0 dog-images-row row-cols-1 row-cols-sm-2 row-cols-md-3">
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
    </div>
  </div>
</section>

Bootstrap 如何根据屏幕宽度自动更改页边距

Bootstrap how to change margins automatically with screen width

html

css

flexbox

twitter-bootstrap

bootstrap-5