使用引导程序创建包含 3 个图像的全宽横幅答案

【问题标题】：Creating a full with banner with 3 images using bootsrap使用引导程序创建包含 3 个图像的全宽横幅
【发布时间】：2015-02-27 05:49:08
【问题描述】：

我希望能够将图像在一行上分成 3 个独立但大小相同的列，这些列占据了整个页面的空间。现在，我得到了 3 个大小不一的行。到目前为止，这就是我所拥有的......

   <div class="container-fluid">
    <div class="row">
        <div class="span4">
            <img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
        </div>
        <div class="span4">
            <img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
        </div>
        <div class="span4">
            <img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
        </div>
    </div>
</div>

如果有什么不同，我将在项目中使用的图像具有相同的大小，但如果可能的话，我还想学习如何使用不同大小的图像来做到这一点。

【问题讨论】：

标签： css html twitter-bootstrap-3

【解决方案1】：

在您的带有row 类的div 之后，为每一列添加一个带有col-md-4 类的div 这意味着该行将包含 3 列：Live Demo

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">

            <img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">

        </div>
             <div class="col-md-4">

            <img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">

             </div>
            <div class="col-md-4">

            <img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">

            </div>

    </div>
</div>

图像会根据窗口大小动态改变大小，所以你不必关心它们

【讨论】：

谢谢，这很好用！您是否知道如何使这些图像中的每一个都适合其 col div 的屏幕尺寸？

【解决方案2】：

将class="span4" 更改为class="col-md-4"

【讨论】：