分类导航

Bootstrap 发布时间：2022-04-18 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap float divs从左到右，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

对于我的项目,我正在使用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下.我怎样才能修复它以便将它添加到带有1的div下？

编辑

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

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

http://www.bootply.com/R3MXHJL9wM

这就是我想要做的事情,在页面上填写带有描述的图像.但我希望页面能够填充,而不会像您在示例中看到的那样存在巨大差距.

例如,图像div彼此之间没有间隙(如果你只是创建一个新行就可以获得)

解决方法

你应该从Twitter Bootstrap阅读 grid section：

@H_502_41@

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列之后,您应该使用新的< div class =“row”>开始一个新行.

看看这个official example.

所以,如果你想用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

在第二个片段中,您应该使用缩略图组件扩展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