问题:

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.

回答1:

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

回答2:

Change class="span4" to class="col-md-4"

转载请标明出处:Creating a full with banner with 3 images using bootsrap

文章来源: Creating a full with banner with 3 images using bootsrap

标签

广告条