как дать отступ для элементов строки, не разбивая строку?

Question

Как добавить маржу между элементами, не разбивая строку в этой скрипке

Этот вопрос задавался ранее здесь Однако я не смог найти правильный ответ, потому что в моем случае добавление отступов невозможно.

.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 внутри вашего col

.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>