在引導網格中的專案之間添加邊距-有解無憂

我創建了一個具有以下布局的 3 行的引導網格。

在引導網格中的專案之間添加邊距

我要做的只是在它們之間添加一點邊距，但是正如您所看到的，列和行不再正確對齊。

有沒有辦法解決它，或者也許有更好的方法來實作我想要的？

#featured {
  margin-bottom: 15px;
}

.featured-1 {
  height: 200px;
}

.featured-2 {
  height: 50%;
  margin-left: 5px;
}

.featured-3 {
  height: 50%;
  margin-left: 5px;
  margin-top: 5px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="container">
  <div class="row featured-1" id="featured">
    <div class="col-md-7 col-sm-12 bg-warning">
      Featured 1
    </div>
    <div class="col-md-5">
      <div class="row featured-2">
        <div class="col-md-12 col-sm-12 bg-danger">
          Featured 2
        </div>
      </div>
      <div class="row featured-3">
        <div class="col-md-12 col-sm-12 bg-success">
          Featured 3
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12 bg-primary">For reference</div>
  </div>
</div>

uj5u.com熱心網友回復：

官方引導檔案推薦使用Gutter.

你可以這樣做：

.featured-1 {
  height: 200px;
}
.featured-2, .featured-3 {
  height: 50%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="row featured-1" id="featured">
    <div class="col-md-7 col-sm-12 bg-warning">
      Featured 1
    </div>
    <div class="col-md-5 px-4">
      <div class="row featured-2">
        <div class="col-md-12 col-sm-12 bg-danger">
          Featured 2
        </div>
      </div>
      <div class="row featured-3">
        <div class="col-md-12 col-sm-12 bg-success gy-2">
          Featured 3
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 bg-primary gy-2">For reference</div>
  </div>
</div>

uj5u.com熱心網友回復：

列上已經有填充物，用作排水溝。我會把背景放在你的專欄內容上。

#featured {
  margin-bottom: 15px;
}

.featured-1>div {
  height: 200px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="container">
  <div class="row" id="featured">
    <div class="col-7 featured-1">
      <div class="bg-warning">Featured 1</div>
    </div>

    <div class="col-5 d-flex flex-column">
      <div class="featured-2 flex-grow-1 bg-danger mb-1">Featured 2</div>

      <div class="featured-3 flex-grow-1 bg-success mt-1">Featured 3</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="bg-primary">For reference</div>
    </div>
  </div>
</div>

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

標籤：htmlcss推特引导

上一篇：Bootstrap5導航欄-中心藥丸，無論螢屏大小如何

下一篇：為什么Bootstrap5.2.1分頁Datatable時會導致modal隱藏？