Question

我正在建立一个带有画廊的简单网站。根据我的理解，以下代码在网站的宽度为中型设备（768像素至992像素）时应会显示两列照片。但是，屏幕上仅显示一列。我无法将图像按行分组，因为我需要它们能够响应并适应设备屏幕的宽度。这种行为可能是什么原因？

<div class="container-fluid">
    <h1 class="text-center pb-4">Gallery</h1>
    <div id="lightgallery" class="text-center no-gutter">
      <a data-src="img/img-1.jpg">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-12" src="img/img-1.jpg">
      </a>
      <a data-src="img/img-2.jpg">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-2.jpg">
      </a>
      <a data-src="img/img-3.jpg">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-3.jpg">
      </a>
      <a data-src="">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-4.jpg">
      </a>
      <a data-src="">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-5.jpg">
      </a>
      <a data-src="">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-6.jpg">
      </a>
    </div>
  </div>

当我将中等列设置为col-md-5时，它们可以工作，但考虑到引导的最大列数（即12），使我想到了这个问题。

Answer 1

Col应该直接嵌入行中。我相信如果您将代码更改为：

<div class="container-fluid">
    <h1 class="text-center pb-4">Gallery</h1>
    <div id="lightgallery" class="text-center no-gutter row">
      <a data-src="img/img-1.jpg" class="col-lg-3 col-md-6 col-sm-12">
        <img class="img-fluid" src="img/img-1.jpg">
      </a>

Answer 2

我设法找到了解决方案。尽管我有不使用行的想法，但这还是需要的。我添加了SELECT name, sales_2018-sales_2017 as increase FROM sales ORDER BY increase DESC LIMIT 1的div和另一个div，每个图片一个，并带有列类。下面是固定代码：

class="row"

屏幕上没有两个Bootstrap列

2 个答案: