Bootstrap4中的列間填充，沒有側邊距-有解無憂

我正在使用引導程式 4.1。我想要一個單元格網格（框 AE），它們之間有一些間距。如果我在每一列上設定填充，我也會在左側和右側得到填充，這會破壞與其他元素的對齊；例如，我希望 Box A 和 Box D 與 Top Box 的左邊緣對齊。

檔案談到使用負邊距來抵消這一點，但我不知道該放在哪里。

這組盒子是動態的（可能有幾十個），我想對所有盒子應用一致的樣式，而不是對特定的盒子進行修改。

我還想避免對 Top Box 進行修改，它是我真實頁面中許多現有 UI 元素的替代品，無法輕易更改。

Bootstrap 4中的列間填充，沒有側邊距

這是一個 JSFiddle： https ://jsfiddle.net/u5094cjb/2/

body {
  margin: 1rem;
}

.box {
  border: 1px solid black;
  background-color: white;
  margin-bottom: 0.1rem;
}

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<div class="container">

  <!-- ideally don't change this part --> 
  <div class="row">
    <div class="col">
      <div class="box">Top Box</div>
    </div>
  </div>


  <!-- change this part only -->
  <div class="row">
    <div class="col">
      <div class="container">
        <div class="row">
          <div class="col-4 px-1">
            <div class="box">Box A</div>
          </div>
          <div class="col-4 px-1">
            <div class="box">Box B</div>
          </div>
          <div class="col-4 px-1">
            <div class="box">Box C</div>
          </div>
          <div class="col-4 px-1">
            <div class="box">Box D</div>
          </div>
          <div class="col-4 px-1">
            <div class="box">Box E</div>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>

uj5u.com熱心網友回復：

對于您要完成的作業，您似乎使用了一些“太多”的代碼。我把它清理了一下，所以現在你只有兩行并添加px-1到你的第一行col

body {
  margin: 1rem;
}

.box {
  border: 1px solid black;
  background-color: white;
  margin-bottom: 0.1rem;
}

<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<div class="container">
   <div class="row">
        <div class="col px-1">
            <div class="box">Top Box</div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-4 px-1">
            <div class="box">Box A</div>
        </div>
        <div class="col-4 px-1">
            <div class="box">Box B</div>
        </div>
        <div class="col-4 px-1">
            <div class="box">Box C</div>
        </div>
        <div class="col-4 px-1">
            <div class="box">Box D</div>
        </div>
        <div class="col-4 px-1">
            <div class="box">Box E</div>
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

使用 Bootstrap 類pr-1&pl-0而不是px-1Box A 和 Box D

例如，

<div class="col-4 px-1">
  <div class="box">Box B</div>
</div>
<div class="col-4 px-1">
  <div class="box">Box C</div>
</div>
<div class="col-4 pr-1 pl-0">
  <div class="box">Box D</div>
</div>
<div class="col-4 px-1">
  <div class="box">Box E</div>
</div>

小提琴：https ://jsfiddle.net/kongallis/cebqw7y8/2/

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

標籤：css 推特引导引导程序 4

上一篇：flex專案不會拉伸，當它們統一時，它會將我的所有其他專案移動到一個div中

下一篇：為什么我的Bootstrap拉伸鏈接會延伸到多個級別？