twitter-bootstrap Bootstrap 浮动 div 从左到右
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26821081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap float divs left to right
提问by Sven van den Boogaart
For my project i am using bootstrap.
对于我的项目，我正在使用引导程序。
I am trying to show divs that float from left to right so i made
我试图显示从左到右浮动的 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
http://www.bootply.com/yyKS8cgS4h
But as you see the div with the 4s is not added under the div with the 1s but under the div with the 3s. How can i fix it so that it will be added under the divs with the 1s ?
但是正如您所看到的，带有 4s 的 div 没有添加到带有 1s 的 div 下，而是添加到带有 3s 的 div 下。我该如何修复它以便将它添加到带有 1s 的 div 下？
Edit
编辑
The numbers of divs is dynamic so i cant just add it to div 11111, what i want is something like on the pinterest.com homepage where all the divs are added from left to right and there are nog big spaces under every div
div 的数量是动态的，所以我不能将它添加到 div 11111，我想要的是类似于 pinterest.com 主页上的所有 div 从左到右添加，并且每个 div 下都有大空间
To understand my problem better i made another example.
为了更好地理解我的问题，我又举了一个例子。
http://www.bootply.com/R3MXHJL9wM
http://www.bootply.com/R3MXHJL9wM
This is what i want to do, fill the page with images with a discription under it. But i want the page to be filled without the huge gaps like the ones you see in the example.
这就是我想要做的，用图像填充页面，并在其下进行描述。但我希望页面被填充，而没有像你在示例中看到的那样巨大的空白。
An example, the images divs are under each other with no gaps under them (which you get if you just make a new row)
例如，图像 div 相互下方没有间隙（如果你只是创建一个新行，你就会得到）
采纳答案by Sven van den Boogaart
For anyone with the same problem i suggest using column resets
对于任何有同样问题的人，我建议使用列重置
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
由于有四层网格可用，您一定会遇到问题，在某些断点处，您的列不能完全清除，因为一个比另一个高。要解决这个问题，请结合使用 .clearfix 和我们的响应式实用程序类。
回答by Pier-Alexandre Bouchard
You should read the grid sectionfrom Twitter Bootstrap:
您应该阅读Twitter Bootstrap 中的网格部分：
Grid columns are created by specifying the number of twelve available columns you wish to span. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
网格列是通过指定要跨越的十二个可用列的数量来创建的。如果在一行中放置超过 12 列，则每组额外的列将作为一个单元换行到一个新行。
So, after every 12 columns, you should start a new line with a new <div class="row">.
因此，在每 12 列之后，您应该以新的<div class="row">.
Take a look to this official example.
看看这个官方示例。
So, if you want to add the 4s under the div with the 1s, your snippet should be:
所以，如果你想用 1s 在 div 下添加 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
http://www.bootply.com/HbFGma5nI0
In your second snippet, you should extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
在您的第二个代码段中，您应该使用缩略图组件扩展 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>
回答by anpsmn
If you look at the pinterest.comHome Pagethen you will find out that each sections is getting a top and left property. I guess they calculate and set top and left property.
如果您查看pinterest.com主页，您会发现每个部分都有一个 top 和 left 属性。我猜他们会计算并设置 top 和 left 属性。
This is just an approach to get the desired look.
这只是获得所需外观的一种方法。
Instead of having one row and adding all divs inside, you can have x columns in that row and programmatically add divs in each column.
您可以在该行中有 x 列并以编程方式在每列中添加 div，而不是在一行中添加所有 div。
EX:Say I have set 4 columns x1, x2, x3 and x4 and have around 9 divs. I will run a loop so that the divs are appended in this order d1 -> x1, d2-> x2, d3-> x3, d4-> x4, d5->x1 ..... so on.
EX：假设我设置了 4 列 x1、x2、x3 和 x4，并且有大约 9 个 div。我将运行一个循环，以便按照 d1 -> x1、d2-> x2、d3-> x3、d4-> x4、d5->x1 ..... 的顺序附加 div。
Check below code. I have used an array for heights just to show this works for varied heights.
检查下面的代码。我使用了一个高度数组，只是为了展示不同高度的作品。
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+""
});
}
Note:The js code for appending would be taken care by your code behind generating the divs. I have just used for this demo.
注意：用于附加的 js 代码将由生成 div 的代码处理。我刚刚用于这个演示。
回答by Louis D.
If you use bootstrap 3, you must have 12 columns. Try this:
如果使用 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>
回答by Srinivas Buddha
Use the Masonry plugin, get it from here - https://masonry.desandro.com/
使用 Masonry 插件，从这里获取 - https://masonry.desandro.com/
回答by Claies
The issue you are seeing with the column floats is related to the way that the responsive columns reset when they are different heights.
您看到的列浮动问题与响应列在不同高度时重置的方式有关。
As illustrated on http://getbootstrap.com/css/#grid-responsive-resets, you may have to manually clear the columns so that their position can be re-calculated. Adding a <div class="clearfix"></div>will allow columns following it to be re-calculated. If your intent is to have 3 columns, and have a new row starting with every 4th, you can include this div after every 3rd element.
如http://getbootstrap.com/css/#grid-responsive-resets 所示，您可能必须手动清除列，以便可以重新计算它们的位置。添加 a<div class="clearfix"></div>将允许重新计算其后的列。如果您的意图是有 3 列，并且每 4 行有一个新行，您可以在每 3 个元素之后包含此 div。
for example:
例如：
<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>
column 4 now correctly appears below column 1, but not IMMEDIATELY below; instead, it is lined up correctly for column 5 to appear below column 2, while still allowing the entire row to be at the same starting height.
第 4 列现在正确地出现在第 1 列下方，但不会立即出现在下方；相反，它正确排列，第 5 列出现在第 2 列下方，同时仍然允许整行处于相同的起始高度。
I expanded the example a bit at this example: http://www.bootply.com/NriYjz0OAl
我在这个例子中稍微扩展了这个例子：http: //www.bootply.com/NriYjz0OAl
And to demonstrate it with your other example: http://www.bootply.com/oZz9zoFiqe
并用您的其他示例进行演示：http: //www.bootply.com/oZz9zoFiqe
There doesn't seem to be a way to eliminate the gap in each row without manually calculating the heights of each div, as shown in another answer.
如另一个答案所示，如果不手动计算每个 div 的高度，似乎没有办法消除每行中的间隙。
回答by UtkarshBhavsar
Twitter Bootstrap is using 12 columns Grid system for mobile, tablet, and desktop. So You can not use col-md-4 four times it will make total 16. So you need to divide screen accordingly. This might help you to understand div structure from here
Twitter Bootstrap 正在为移动设备、平板电脑和桌面设备使用 12 列网格系统。所以你不能使用 col-md-4 四次，总共 16。所以你需要相应地划分屏幕。这可能会帮助您从此处了解 div 结构
回答by Jarek.D
To achieve a structure required by boostrap:
要实现 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>
You might so something like (PHPish (no so) pseudocode):
你可能是这样的（PHPish (no so) 伪代码）：
$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;
回答by Taco Jan Osinga
You could use JavaScript to iterate through all cells and get each height. Then calculate te most optimal distribution. After that you could move the cells into 3 large columns, or set the position of the cells to absolute and set the top-left coordinates with JavaScript. Downside is that you need all content to be loaded into the browser before running this JavaScript.
您可以使用 JavaScript 遍历所有单元格并获取每个高度。然后计算te 最优分布。之后，您可以将单元格移动到 3 个大列中，或者将单元格的位置设置为绝对位置并使用 JavaScript 设置左上角坐标。缺点是您需要在运行此 JavaScript 之前将所有内容加载到浏览器中。
Another option is to set a fixed height on all cells (I did this in similar cases). Especially when the caption consist of only one or two lines. You can use CSS ellipsis to truncate long names in a somewhat acceptable way.
另一种选择是在所有单元格上设置固定高度（我在类似情况下也是这样做的）。特别是当标题仅由一两行组成时。您可以使用 CSS 省略号以某种可接受的方式截断长名称。
