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

Question

我想在屏幕截图中有 4 列，如下所示，它们周围有边距。它们每个都是 col-md-6，边距为 0.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 列周围留出一点边距以获得全屏外观的最佳方法是什么？

Answer 1

像这样的东西会起作用。 但现在我想弄清楚，如何获得相等的空间。

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