twitter-bootstrap – Bootstrap float divs从左到右

发布时间：2020-12-17 21:34:32 所属栏目：安全来源：网络整理

导读：对于我的项目,我正在使用bootstrap. 我试图显示从左到右漂浮的div,所以我做了 div class="row" div class="col-md-4"22222111br/div div class="col-md-4"2222222222br222222222222br/div div class="col-md-4"333333333333br/div div class="col-md-4"44444

对于我的项目,我正在使用bootstrap.

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

<div class="row">
  <div class="col-md-4">22222111<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 22222,我想要的是在pinterest.com主页上,所有的div都是从左到右添加的,每个div下都有nog大空格

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

http://www.bootply.com/R3MXHJL9wM

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

enter image description here

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

解决方法

你应该从Twitter Bootstrap阅读 grid section：

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">22222111<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>22222222222222211</p>
      </div>
   </div>
</div>

http://www.bootply.com/QKZBKM3NmO

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!