两个 Bootstrap 列不适合屏幕 [重复]答案

【问题标题】：Two Bootstrap columns don't fit on the screen [duplicate]两个 Bootstrap 列不适合屏幕 [重复]
【发布时间】：2019-05-28 07:10:38
【问题描述】：

我正在建立一个带有画廊的简单网站。下面的代码，据我了解，当网站的宽度为中等设备（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），给我留下了这个问题。

【问题讨论】：

标签： css image bootstrap-4

【解决方案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>

【讨论】：

我已经尝试过了，我必须承认它使图片达到最大尺寸（它们占据了整个水平空间），它们甚至没有以任何方式对齐。因此，我还将 col 类添加回图像并返回到起点。

【解决方案2】：

我设法找到了解决方案。尽管我不使用行的想法，它是需要的。我添加了带有class="row" 的div 和另一个带有列类的div，每张图片一个。下面是固定代码：

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

【讨论】：