css - 如何在不破坏行的情况下为行的元素提供边距？

Question

如何在不打断 fiddle 中的行的情况下在元素之间添加边距

这个问题之前有人问过here但是我找不到合适的答案，因为在我的情况下不可能添加填充。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.item {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-6 item m-1">2</div>
    <div class="col-6 item">4</div>
  </div> 
  <div class="row">
    <div class="col-8 item m-2">2</div>
    <div class="col-4 item">1</div>
  </div>
</div>

Answer 1

好吧，你可以通过在你的列中添加一个新的 div 来做到这一点

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.item {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-6"><div class="m-1 item">2</div></div>
    <div class="col-6"><div class="m-1 item">4</div></div>
  </div> 
  <div class="row">
    <div class="col-8 "><div class="m-2 item">4</div></div>
    <div class="col-4"><div class="m-2 item">6</div></div>
  </div>
</div>