Bootstrap如何使用螢屏寬度自動更改邊距-有解無憂

在全屏上，我將邊距設定為使容器完全適合頁面，沒有邊距：.gallery 中的邊距為 200px 容器將太大以適應頁面，而無需滾動查看全部

我遇到的問題是當螢屏寬度縮小時邊距保持不變并將容器推到不存在

我正在嘗試使用@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/[email protected]/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>

uj5u.com熱心網友回復：

問題來自缺乏widths對元素的定義。添加w-100您的并section移動到父容器 div。gallerybg-primary

然后更改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/[email protected]/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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/458998.html

標籤：html css 推特引导弹性盒引导程序 5

上一篇：為什么不將Select2應用于我的選擇元素？

下一篇：JqueryOnclick函式不適用于第二個資料表的其他頁面