Bootstrap 4 网格 col-6 调整为 col-sm-3 在行之间添加空间

Question

我正在使用 BS4 Beta 并且有一个 4 列宽的全屏网格，并且将屏幕大小缩小到 2 列。我有<div class="row mb-3"> 在图像之间放置一个空格。当屏幕变小时，图像彼此重叠，没有空间。我怎样才能以不同的方式编码以获得空间？ 我在这里有一个工作的codepen https://codepen.io/mlegg10/pen/yzjRya

这里是所有代码

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-3">
  <div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>
   <div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>
   <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix d-none d-sm-block"></div>
   <div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>
  <div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>
</div>
<div class="row mb-3">
  <div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>
   <div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>
   <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix d-none d-sm-block"></div>
   <div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>
  <div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>
</div>

Answer 1

添加

.img-fixed{
  padding-bottom:5px;  
}

到您的 CSS 文件。在您的代码笔中工作得很好。