Float无法与Twitter-Bootstrap一起使用
[英]Float not working with Twitter-Bootstrap
问题描述
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. 尝试将它们塞入单独的div中。 tried stuff them all into a single div. 尝试将它们全部塞进一个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 这是代码的链接： 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 个解决方案
解决方案1
1 已采纳 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 . 您的代码无效，因为您将缩略图放在了不同的两行中，它们必须在同一row 。 http://jsbin.com/dekefidawo/1/edit 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.