使用 bootstrap 创建包含 3 个图像的全宽横幅

Question

我希望能够在一行中将图像分成 3 个独立但大小相同的列，这些列占据整个页面的 space。现在，我得到 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>

如果有区别，我将在项目中使用的图像具有相同的尺寸，但如果可能的话，我还想学习如何使用不同尺寸的图像。

Answer 1

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

Answer 2

在 div 和 class row 之后为每一列添加一个 div 和 class col-md-4 这意味着该行将包含 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>

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

使用 bootstrap 创建包含 3 个图像的全宽横幅

Creating a full with banner with 3 images using bootsrap

html

css

twitter-bootstrap-3