twitter_bootstrap

USHKO浮动夫图从左到右

对于我的项目，我使用 bootstrap.

我正试图向左转漂浮的Diva，所以我做到了

<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
但是，如你看， div 从 4s 没有添加 div 从 1s, 而且 div 从 3s. 我怎样才能解决它，以便它被添加 divs 从 1s ?

编辑

潜水的数量是动态的，所以我不能只是把它添加到 div 11111, 我想要的是像主页的东西 pinterest.com, 从左到右添加所有DIVA，每个圣经都没有大空间

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

http://www.bootply.com/R3MXHJL9wM
这就是我想做的：用它们下面的描述填写页面图像。但我希望页面没有巨大的空间填充，类似于你在榜样中看到的页面。

https://i.stack.imgur.com/Tn5if.png
例如，图像 divs 彼此没有差距 /如果您只是制作一个新的字符串，您会得到哪些/

已邀请:

9 个回复

诸葛浮云

赞同来自:

你必须阅读
http://getbootstrap.com/css/#grid
的 Twitter Bootstrap:

通过指定可用的12个数字来创建网状列
您要覆盖的列。如果一个线放置更多 12 列，每组附加列作为一个整体，将传输到新字符串。

所以之后 12 列必须从新的线开始新的行

<div class="row">

.

看看这个
http://getbootstrap.com/css/#grid-example-basic
.

所以，如果你想添加 4s 在下面 div 从 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&gt; &lt;div class=" col-md-4"="">444444444444<br/></div>

</div>

http://www.bootply.com/HbFGma5nI0
在第二个片段中，您必须展开网格系统 Bootstrap 使用缩略图组件轻松显示网格图像，视频，文本等等。

<div class="col-md-4">

<div class="thumbnail">

<img class="img-responsive" src="[url=http://placehold.it/350X350"/>]http://placehold.it/350X350"/>[/url]

<div class="caption">

<p>11111111111111111</p>

</div>

</div>

</div>

http://www.bootply.com/QKZBKM3NmO

三叔

赞同来自:

对于那些有同样问题的人来说，我建议使用
http://getbootstrap.com/css/%2 ... esets
有库存四个级别的网格，你将不可避免地遇到问题
, 当在某些点时，您的柱子并不完全清洁，因为
其中一个高于另一个。要修复它，请使用组合 a
.clearfix 和我们的自适应课程公用事业。

风见雨下

赞同来自:

如果你看
http://pinterest.com
主页
pinterest.com, 然后发现每个部分都有一个属性 top 和 left. 我猜他们计算并建立上部和左财产。

这只是一个获得所需视图的方法。

而不是有一行并添加全部 divs 里面，你可以 x 本行中的列和以编程方式添加 divs 在每列中。

EX:

假设我安装了 4 柱子 x1, x2, x3 和 x4 我有关于 9 DOVOV。我将运行周期，以便以该顺序添加DIVA 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+""

 }/;

}

http://jsfiddle.net/anpsmn/t66 ... sult/
笔记：

添加的JS代码将由您的代码后面拍摄 divs. 我只是为了这个演示。

风见雨下

赞同来自:

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

http://getbootstrap.com/css/#grid

八刀丁二

赞同来自:

使用插头 Masonry, 从这里得到它
https://masonry.desandro.com/
/

八刀丁二

赞同来自:

您用列浮动的问题浮动与反应列在具有不同的高度时是相关的。

如图所示
http://getbootstrap.com/css/%2 ... esets
, 您可能必须手动清洁列，以便再次重新计算它们的位置。添加

<div class="clearfix"></div>

允许重新计算以下列的列。如果你想拥有 3 列和新字符串从每4个开始，您可以启用此 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, 但不是 IMMEDIATELY 以下; 相反，它被正确排列在列中 5 在列下显示 2, 同时，允许整个线在相同的初始高度上。

我在这个例子上扩展了一个小例子：
http://www.bootply.com/NriYjz0OAl
并在您的其他示例中演示它：
http://www.bootply.com/oZz9zoFiqe
似乎没有办法消除每行中的差距而不手动计算每个行的高度 div, 如另一个答案所示。

小姐请别说爱

赞同来自:

您可以使用 JavaScript 对于所有细胞的胸部并接收每个高度。然后计算最佳的分布。之后，您可以移动细胞 3 大列或设置单元的绝对位置，并设置左上坐标 JavaScript.
缺点是您需要的是，使整个内容在开始之前将整个内容加载到浏览器中。 JavaScript.

另一种选择 - 为所有单元格安装固定高度 /我在类似的情况下做了/. 特别是当签名仅由一两行组成时。你可以使用很多 CSS 对于截断长名称有些可接受的方式。

诸葛浮云

赞同来自:

实现所需的结构 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>

你可以这样做 /PHPish /no so/ 伪码/:

$values = get_values//;

$html = '<div class="row">';

foreach/$values as $idx =&gt; $v/{

 $html .= "<div class="col-md-4">$v</div>";

 $html .= /$idx + 1/ % 3 ? '' : '<div class="row"></div>'; 

}

$html = .= '</div>';

echo $html;

詹大官人

赞同来自:

Twitter Bootstrap 使用网格系统 12 移动设备，平板电脑和桌面的列。所以你不能使用 col-md-4 四次，它将全部 16. 因此，您需要相应地划分屏幕。它可以帮助您了解结构 div 从这里

要回复问题请先登录或注册

USHKO浮动夫图从左到右

9 个回复

发起人

相关问题

问题状态

USHKO浮动夫图从左到右

与内容相关的链接

9 个回复

发起人

相关问题

问题状态