Bootstrap 4 img-responsive在一排答案

【问题标题】：Bootstrap 4 img-responsive in one rowBootstrap 4 img-responsive在一排
【发布时间】：2018-03-01 19:10:19
【问题描述】：

我正在尝试向我的引导站点添加一行，其中包含四个通过 img-responsive 属性调整大小的图像。我想要以下外观： “桌面 4 列，平板电脑 2 列，移动设备 1 列” 为此，我使用了我在 stackoverflow 上找到的“col-md-3 col-sm-6 col-xs-12”类。

我的代码如下所示：

<div class="container download" id="downloads">
    <h2>Downloads</h2>
    <p class="lead">Some Text.....</p>
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkT">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>
    </div>
  </div>

我尝试了几个 col 类，但没有一个有效。如果我用萤火虫检查网站，萤火虫会显示，每个 col div 类都使用页面的整个宽度，并且图像显示在一行中:(

感谢您的帮助

【问题讨论】：

如果你能制作一个功能强大的小演示，这样我们就可以看到它的发生，这将很有帮助。您的代码看起来不错，我唯一能想到的是您的内联宽度和高度样式。他们会重写 img 响应类样式，这很可能会根据图像的尺寸造成问题..

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

查看您的代码，行/列部分似乎没问题...但是您使用内联样式来调整图像大小，这将覆盖 .responsive-img 类并导致图像大小变差。如果您没有看到列按预期工作，请确保您适当地包含引导 css，并且您使用的是相对于类名的正确版本的引导程序。 .responsive-img 是 Bootstrap 3 类。如果您使用的是 Bootstrap 4，则需要使用 .img-fluid

我有一个看起来像这样的工作示例：

<div class="container download" id="downloads">
    <h2>Downloads</h2>
    <p class="lead">Some Text.....</p>
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkT">
            <img alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img  alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img src="https://placehold.it/300" alt="AltText" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>
    </div>
 </div>

请看这里：https://codepen.io/kball/pen/RLaXqR

有关引导程序 4 的示例，请参阅：https://codepen.io/kball/pen/aLZozo

【讨论】：

BS4 使用 img-fluid 代替 img-responsive
好点 - 我将添加一个 BS4 示例并使用它作为第二个选项进行更新

【解决方案2】：

谢谢大家！ kball 导致我的错误... 我注意到我使用的是 Bootstrap 2.3 -.-，所以我更新到版本 4，删除了我添加到图像中的内联样式并将 img-responsive 更改为 img-fluid。

现在它就像一个魅力 :) 再次感谢您的帮助，我对墙上的自动取款机感到头疼，因为我没有注意到我使用的是旧的 Bootstrap 版本

【讨论】：