Question

对于我的项目，我正在使用bootstrap。

我试图显示从左到右浮动的div，所以我做了

<div class="row">
  <div class="col-md-4">11111111<br></div>
  <div class="col-md-4">2222222222<br>222222222222<br></div>
  <div class="col-md-4">333333333333<br></div>
  <div class="col-md-4">444444444444<br></div>
</div>

http://www.bootply.com/yyKS8cgS4h

但是正如你所看到的那样，带有4s的div并没有添加到带有1s的div下面，而是带有3s的div下面。我如何修复它以便将它添加到带有1s的div下？

修改

div的数量是动态的，所以我不能将它添加到div 11111，我想要的是在pinterest.com主页上，所有div都是从左到右添加的，每个div下都有nog大空格

为了更好地理解我的问题，我做了另一个例子。

http://www.bootply.com/R3MXHJL9wM

这就是我想要做的事情，在页面上填写带有描述的图片。但是我想要填充页面而没有像你在示例中看到的那样巨大的空白。

一个例子，图像div彼此之间没有间隙（如果你只是换了一行就会得到）

Answer 1

您应该阅读Twitter Bootstrap中的grid section：

通过指定可用的十二个数来创建网格列你希望跨越的列。如果在一行中放置超过12列，则每组额外列将作为一个单元包裹到新行上。

因此，在每12列之后，您应该使用新的<div class="row">开始一个新行。

看看这个official example。

所以，如果你想在div下添加1s的4s，那么你的代码片段应为：

<div class="row">
  <div class="col-md-4">11111111<br></div>
  <div class="col-md-4">2222222222<br>222222222222<br></div>
  <div class="col-md-4">333333333333<br></div>
</div>

<div class="row>
  <div class="col-md-4">444444444444<br></div>
</div>

http://www.bootply.com/HbFGma5nI0

在您的第二个片段中，您应该使用缩略图组件扩展Bootstrap的网格系统，以便轻松显示图像，视频，文本等网格。

<div class="col-md-4">
   <div class="thumbnail">
      <img src="http://placehold.it/350X350" class="img-responsive">
      <div class="caption">
         <p>11111111111111111</p>
      </div>
   </div>
</div>

http://www.bootply.com/QKZBKM3NmO

Answer 2

如果您查看pinterest.com 主页，那么您会发现每个部分都有左上角和左侧属性。我猜他们会计算并设置顶部和左边的属性。

这只是一种获得理想外观的方法。

您可以在该行中添加x列，并以编程方式在每列中添加div。而不是拥有一行并在其中添加所有div。

EX：说我设置了4列x1，x2，x3和x4，并且大约有9个div。我将运行一个循环，以便div按此顺序附加d1 - ＆gt; x1，d2-> x2，d3-> x3，d4-> x4，d5-＆gt; x1 ......等等。

检查以下代码。我已经使用了一个高度数组来表明这个工作的高度不同。

var arr = [100, 200, 300, 400, 200, 100, 300, 500];
var  colors = ["red","green","blue", "yellow","golden", "orange", "maroon"]
var divs = 13;

for (var i = 0; i < divs; i++) {
    var ht = arr[Math.floor(Math.random() * arr.length)];
    var clr =  colors[Math.floor(Math.random() * colors.length)];
    var rem = i%4;

    $("#wrapper .box"+rem).append("<div >random text</div>");
    $(".box"+rem+" div:last").css({
        "height": ht + "px", "background":clr+""
    });
}

Fiddle

注意：生成div的代码会关注附加的js代码。我刚用这个演示。

Answer 3

对于有同样问题的人，我建议使用column resets

随着四层网格可用，您必然会遇到问题在某些断点处，你的专栏不是很清楚一个比另一个高。要解决这个问题，请使用a的组合 .clearfix和我们的响应实用程序类。

Answer 4

如果使用bootstrap 3，则必须有12列。试试这个：

<div class="row">
  <div class="col-md-3">11111111<br></div>
  <div class="col-md-3">2222222222<br>222222222222<br></div>
  <div class="col-md-3">333333333333<br></div>
  <div class="col-md-3">444444444444<br></div>
</div>

See the Bootstrap doc.

Answer 5

使用Masonry插件，从此处获取 - https://masonry.desandro.com/

Answer 6

您在列浮动中看到的问题与响应列在不同高度时重置的方式有关。

如http://getbootstrap.com/css/#grid-responsive-resets所示，您可能需要手动清除列，以便重新计算其位置。添加<div class="clearfix"></div>将允许重新计算其后的列。如果你的目的是拥有3列，并且每隔4行开一个新行，你可以在每个第3个元素之后包含这个div。

例如：

<div class="row">
  <div class="col-md-4">11111111<br></div>
  <div class="col-md-4">2222222222<br>222222222222<br></div>
  <div class="col-md-4">333333333333<br></div>
  <div class="clearfix"></div>
  <div class="col-md-4">444444444444<br></div>
  <div class="col-md-4">5555555555555<br></div>
</div>

第4列现在正确显示在第1列下方，但下面并非立即显示;相反，它排列正确，第5列显示在第2列下方，同时仍然允许整行处于相同的起始高度。

我在这个例子中稍微扩展了一下这个例子：http://www.bootply.com/NriYjz0OAl

并使用您的其他示例演示：http://www.bootply.com/oZz9zoFiqe

如果没有手动计算每个div的高度，似乎没有办法消除每一行的差距，如另一个答案所示。

Answer 7

Twitter Bootstrap正在使用12列网格系统用于移动设备，平板电脑和桌面设备。所以你不能使用col-md-4四次它会使总数为16.所以你需要相应地划分屏幕。这可能有助于您了解here

中的div结构

Answer 8

实现bootstrap所需的结构：

<div class="row">
  <div class="col-md-4">11111111<br></div>
  <div class="col-md-4">2222222222<br>222222222222<br></div>
  <div class="col-md-4">333333333333<br></div>

</div>
<div class="row">
   <div class="col-md-4">444444444444<br></div>
</div>

您可能会执行类似（PHPish（不会）伪代码）的事情：

$values = get_values();
$html = '<div class="row">';
foreach($values as $idx => $v){
    $html .= "<div class='col-md-4'>$v</div>";
    $html .= ($idx + 1) % 3 ? '' : '<div class="row"></div>';        
}
$html = .= '</div>';
echo $html;

Answer 9

您可以使用JavaScript迭代所有单元格并获取每个高度。然后计算最佳分布。之后，您可以将单元格移动到3个大列，或将单元格的位置设置为绝对，并使用JavaScript设置左上角坐标。缺点是您需要在运行此JavaScript之前将所有内容加载到浏览器中。

另一个选择是在所有单元格上设置固定高度（在类似情况下我这样做了）。特别是当标题只包含一行或两行时。您可以使用CSS省略号以某种可接受的方式截断长名称。

Bootstrap float从左到右

9 个答案: