html - 围绕两个Bootstrap列的边距导致下一行中断

我想在屏幕截图中有如下四列，并在其周围留有空白。它们每个都是col-md-6，边距为.5％。但是，此裕度最初会使列中断至下一行。我知道没有类似于border-box的margin-box选项。我当前的解决方案是从以下方法修改flex属性：

flex: 0 0 0 50%;

至：

flex: 0 0 0 49%;

为了容纳我添加的利润...但是，这在Internet Explorer中不起作用。

.services_content,
.services_image {
  border-radius: 20px;
  margin: .5%;
  flex: 0 0 49%;
}

<div class="row">
  <div class="order-sm-0 order-md-1 col-md-6 services_image_1 services_image" style="background: url('<?php echo $servicesImgLink_1;?>">
    <h2 class="service_img_heading">
      <?php the_field('services_heading_1'); ?>
    </h2>
  </div>
  <div id="services_content_1" class=".order-sm-1  .order-md-0 col-md-6 services_content_1 services_content">
    <p>
      <?php the_content(); ?>
    </p>
  </div>
</div>

在这4列周围留一点点空白的全屏外观的最佳方法是什么？

最佳答案

这样的事情会起作用。
但是现在我想弄清楚如何获得相等的空间。

.block {
  background: url('https://gmsrp.cachefly.net/images/19/12/18/135acb4a87157a536a861995694f7b79/320.jpg');
  border-radius: 5px;
  height: 120px;
  margin: 10px;
}

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

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="block">

      </div>
    </div>
    <div class="col-6">
      <div class="block">

      </div>
    </div>
    <div class="col-6">
      <div class="block">

      </div>
    </div>
    <div class="col-6">
      <div class="block">

      </div>
    </div>
  </div>
</div>

关于html - 围绕两个Bootstrap列的边距导致下一行中断，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59400904/