使用bootsrap创建一个带有3张图片的横幅 [英] Creating a full with banner with 3 images using bootsrap

问题描述

我想要将图片在一行上划分为3个不同但大小相同的列，这些列占据了整个页面的空间。现在，我得到3个不均匀的行。
到目前为止，这是我的...

I want to be able to divide the images up, on one row, into 3 separate but equally sized columns that take up the space of the whole page. Right now, I'm getting 3 unevenly sized rows. So far this is what I have...

   <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>

如果它有区别，我将在项目中使用的图像具有相同的大小，

If it makes a difference, the images I will be using in the project have the same size, but I would also like to learn how to do it with different sized images, if possible.

推荐答案

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

after your div with the class row add for each column a div with class col-md-4 which means the row will contains 3 columns : 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>

图片会根据窗口大小动态更改大小，因此您不必关心关于他们

the images will dynamically change the size depend on the window size , so you don't have to care about them

这篇关于使用bootsrap创建一个带有3张图片的横幅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！