Question

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

我的代码如下所示：

<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类，但都没有。如果我用firebug检查网站，萤火虫显示，每个col div类使用页面的整个宽度，图像显示在一行：（

感谢您的帮助

Answer 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

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

Answer 2

谢谢大家！ kball引导我犯错误... 我注意到我在Bootstrap 2.3 -.-上，所以我更新到版本4，删除了我添加到图像的内联样式并更改了img-responsive to img-fluid。

现在它的功能就像一个魅力:)再次感谢你的帮助，我正在墙壁上敲我的头，因为我没注意到我使用的是旧的Bootstrap版本

Bootstrap 4 img-responsive在一行中

2 个答案: