如何在Bootstraps4中最小化卡片間距

我剛剛使用 bootstraps 4.5 版本創建了 4 張卡片，但間距真的很糟糕，我不知道如何減少卡片的間距，如果您仍然感到困惑，您可以使用影像

.card {
width : 55%;
min-height: 100;
margin:  2%; 
}
.card-img-top {
height: 150px;
object-fit: cover;
}
.card-body{
box-shadow: 0 0 20px 7px rgba(0,0,0,0.1);
}

<div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="card text-md-center">
            <img src="Nike.jpg" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">Shoes</h5>
              <p class="card-text">Some quick example text</p>
              <a href="#">Buy</a>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card text-md-center">
            <img src="chevrolet.jpg" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">Car</h5>
              <p class="card-text">Some quick example text</p>
              <a href="#">Buy</a>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card text-md-center">
            <img src="asuslap.jpg" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">Laptop</h5>
              <p class="card-text">Some quick example text</p>
              <a href="#">Buy</a>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card text-md-center">
            <img src="asusphone.jpg" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">Phone</h5>
              <p class="card-text">Some quick example text</p>
              <a href="#">Buy</a>
            </div>
          </div>
        </div>
      </div>    

我在谷歌搜索過，但還是沒有找到（如何減少卡片的間距），也許你可以幫助我

uj5u.com熱心網友回復：

如果你對寬度卡沒有問題，你可以width : 55%;在你的 CSS 中洗掉。會更好。

或者

您可以更改每個col-md類中的值。每張卡的間距都是由此造成的。

uj5u.com熱心網友回復：

我flex-display在你的.row課上加了一個，并證明了中心的一切。間距對我來說很好。

.card {
width: 55%;
min-height: 100;
margin:  2%; 
}
.card-img-top {
height: 150px;
object-fit: cover;
}
.card-body{
box-shadow: 0 0 20px 7px rgba(0,0,0,0.1);
}

.row {
  display: flex;
  justify-content: center;
}

<div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="card text-md-center">
            <img src="Nike.jpg" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">Shoes</h5>
              <p class="card-text">Some quick example text</p>
              <a href="#">Buy</a>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card text-md-center">
            <img src="chevrolet.jpg" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">Car</h5>
              <p class="card-text">Some quick example text</p>
              <a href="#">Buy</a>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card text-md-center">
            <img src="asuslap.jpg" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">Laptop</h5>
              <p class="card-text">Some quick example text</p>
              <a href="#">Buy</a>
            </div>
          </div>
        </div>

uj5u.com熱心網友回復：

Bootstrap 這樣做的方法是根據瀏覽器/螢屏的寬度動態調整列寬。不要手動設定寬度。讓媒體查詢斷點完成這項作業。

HTML

<div class="container">
  <div class="row">
    <div class="col-6 col-md-4 col-lg-3">
      <div class="card text-md-center">
        <img src="http://placehold.jp/320x180.png" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">Shoes</h5>
          <p class="card-text">Some quick example text</p>
          <a href="#">Buy</a>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3">
      <div class="card text-md-center">
        <img src="http://placehold.jp/320x180.png" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">Car</h5>
          <p class="card-text">Some quick example text</p>
          <a href="#">Buy</a>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3">
      <div class="card text-md-center">
        <img src="http://placehold.jp/320x180.png" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">Laptop</h5>
          <p class="card-text">Some quick example text</p>
          <a href="#">Buy</a>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3">
      <div class="card text-md-center">
        <img src="http://placehold.jp/320x180.png" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">Phone</h5>
          <p class="card-text">Some quick example text</p>
          <a href="#">Buy</a>
        </div>
      </div>
    </div>
  </div>

CSS

.card {
  /* width: 55%; */
  min-height: 100;
  margin: 2%;
}

.card-img-top {
  height: 150px;
  object-fit: cover;
}

.card-body {
  box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.1);
}

JSFiddle 演示

標籤：html css bootstrap-4

上一篇：如何縮小影像以適合沒有設定寬度的容器內部

下一篇：路由未找到變數