Float无法与Twitter-Bootstrap一起使用

Question

我在寻找答案，但是每次尝试使用答案时，我仍然没有得到理想的结果。 我正在使用引导程序缩略图元素，并试图使它们像在引导程序网站上一样相互浮动。 尝试将它们塞入单独的div中。 尝试将它们全部塞进一个div中。 没事。 有任何想法吗？ 任何输入将不胜感激。

这是代码的链接： 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>

Answer 1

您的代码无效，因为您将缩略图放在了不同的两行中，它们必须在同一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>

Float无法与Twitter-Bootstrap一起使用

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-30 15:04:18

Float无法与Twitter-Bootstrap一起使用

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-30 15:04:18

解决方案1
1 已采纳 2015-03-30 15:04:18