Twitter bootstrap 从左到右引导浮动div

对于我的项目，我使用引导

我试图展示从左到右浮动的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>

11111111

22222
22222

333

4444

但是正如你所看到的，带4s的div不是加在带1s的div下面，而是加在带3s的div下面。如何修复它，以便将其添加到带有1的div下

编辑

div的数量是动态的，所以我不能只将其添加到div 11111，我想要的是pinterest.com主页上的一些内容，其中所有div都是从左到右添加的，每个div下都没有大的空格

为了更好地理解我的问题，我又举了一个例子

这就是我想做的，用图片填充页面，并在页面下方进行描述。但是，我希望页面能够被填充，而不会像您在示例中看到的那样出现巨大的空白

---

例如，images div相互下面，下面没有间隙（如果只创建一个新行，就会得到间隙）

如果使用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>

11111111

22222
22222

333

4444

---

Twitter Bootstrap将12列网格系统用于移动设备、平板电脑和桌面。所以你不能四次使用col-md-4，总共16次。所以你们需要相应地划分屏幕。这可能有助于您从

了解div结构。如果您查看主页，您将发现每个部分都有一个top和left属性。我猜他们会计算并设置顶部和左侧属性

这只是获得所需外观的一种方法

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

EX:假设我设置了4列x1、x2、x3和x4，大约有9个div。我将运行一个循环，以使div按以下顺序追加：d1->x1，d2->x2，d3->x3，d4->x4，d5->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+""
    });
}

var-arr=[100200300400200100300500]；
变量颜色=[“红色”、“绿色”、“蓝色”、“黄色”、“金色”、“橙色”、“栗色”]
var-divs=13；
对于（变量i=0；i

---

注意：用于追加的js代码将由生成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>

11111111

22222
22222

333

4444

55555

第4列现在正确地显示在第1列下面，但不在紧接着的下面；相反，第5列正确排列在第2列下方，同时仍允许整行处于相同的起始高度

在此示例中，我对示例进行了一些扩展：

并用你的另一个例子来说明：

在没有手动计算每个div的高度的情况下，似乎没有办法消除每行中的间隙，如另一个答案所示。

您应该阅读Twitter引导：

通过指定十二个可用网格列的数量来创建网格列 要跨越的列。如果一行中放置的列超过12列，则每组额外列将作为一个单元换行

因此，在每12列之后，您应该以一个新的

开始一行

看看这个

因此，如果您想在div下添加4s和1s，您的代码段应该是：

<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>

11111111

22222
22222

333

要实现boostrap所需的结构：

<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>


11111111

22222
22222

333

4444


您可能会这样（PHPish（no-so）伪代码）：

$values=get_values（）；
$html=''；
foreach（$idx=>$v）{
$html.=“$v”；
$html.=（$idx+1）%3？“”：“”；
}
$html=。=''；
echo$html；
您可以使用JavaScript迭代所有单元格并获得每个高度。然后计算出te的最优分布。之后，您可以将单元格移动到3个大列中，或者将单元格的位置设置为绝对，并使用JavaScript设置左上角的坐标。
缺点是，在运行此JavaScript之前，需要将所有内容加载到浏览器中

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

有了四层可用的网格，您肯定会遇到问题
其中，在某些断点处，您的列不完全正确地清除
一个比另一个高。要解决这个问题，请使用
.clearfix和我们的响应实用程序类

使用砌体插件，从这里获取-
我希望带有44444444 s的div位于带有111111111 s的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>
<div class="row">
   <div class="col-md-4">444444444444<br></div>
</div>

$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;