Float not working with Twitter-Bootstrap
Question
I looked for answers but every time I tried to employ the answers I still wasn't getting the desired result. I'm using bootstrap thumbnail elements and trying to get them to float left of each other as they have on the bootstrap website. Tried stuffing them in to separate divs. tried stuff them all into a single div. Nothing's working. Any ideas? Any input would be appreciated.
Here's a link to the code: http://jsbin.com/paregopuni/1/edit?html,css,output
#announcements { width: 70%; margin-left: auto; margin-right: auto; margin-top: 3em; } .jumbotron p { margin: 1em; } .jumbotron h1 { margin: 0.5em; } .floatleft { float: left; } .clear { clear: both; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="portfolio site"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="main.css"> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <title>Sample</title> </head> <body> <div id="wrapper"> <div id="announcements"> <div class="jumbotron"> <h1>Announcements</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> <div class="floatleft"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div> </div> <div class="floatleft"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div> </div> </div> </div> </body> </html>
1 answers
solution1
1 ACCPTED 2015-03-30 15:04:18
Your code doesn't work because you put your thumbnails in two different rows, they have to be in the same row . http://jsbin.com/dekefidawo/1/edit
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
</div>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.