Question

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

这里是所有代码

＆＃13;

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

＆＃13;

Answer 1

添加

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

到你的CSS文件。在您的codepen中工作得很好。

Bootstrap 4 grid col-6调整大小到col-sm-3，在行之间添加空格

1 个答案: