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

好吧，您可以在ur col内添加一个新的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>

如何在不破坏行的情况下赋予行元素边距？

1 个答案: