html – 引导堆栈行中的间隙

概述我正在建立一个Bootstrap 3网格,最终将成为一个投资组合页面.在下面的bootply中,在第一个例子中,您可以看到它在 bootply中完美地堆叠在6到4到3之间 然而,在第二个例子中,在同一个bootply中,有一个项目,其中项目的tile更长,并且当堆栈时,它会在网格中造成间隙. 什么是最好的bootstrap友好的解决方案？任何帮助非常感谢. 有几种方法来处理这个问题： 给你的投资组 我正在建立一个bootstrap 3网格,最终将成为一个投资组合页面.在下面的bootply中,在第一个例子中,您可以看到它在 bootply中完美地堆叠在6到4到3之间

然而,在第二个例子中,在同一个bootply中,有一个项目,其中项目的tile更长,并且当堆栈时,它会在网格中造成间隙.

什么是最好的bootstrap友好的解决方案？任何帮助非常感谢.

解决方法 有几种方法来处理这个问题：

给你的投资组合中的所有元素设置一个高度.
>使用像砖石一样的动态“适合”元素到可用空间.
>使用响应类和clearfix,如文档中的“响应”列标题所述,在Grid秒中复位.
>使用jquery动态调整列高度.

如果您的内容是动态生成的,以便您不知道哪些元素将具有更长的内容,并且为不同的断点设置了不同的布局,响应类方法可能是一种适应性.我用一个小技巧在网格中的每个元素之后,我添加一个div,我可以应用一个迷你clearfix来使用媒体查询.这是额外的标记,但它很好地解决了问题,并允许我有可读性和可维护的标记,同时避免使用JavaScript来调整布局.以下是使用您的标记的示例：

Updated Bootply

<div > <!--Add a class so you can target with nth-child-->    <div >        <div >            <div >                <a href="#">                    <img src="http://placehold.it/200x200" >                </a>            </div>            <div >                This is text            </div>          </div>     </div>    <div ></div> <!--Here's the added div after every element-->  ....</div> <!--/.portfolio.row-->

CSS：

@media (max-wIDth: 767px) {    .portfolio>.clear:nth-child(6n)::before {      content: '';      display: table;      clear: both;    }}@media (min-wIDth: 768px) and (max-wIDth: 1199px) {    .portfolio>.clear:nth-child(8n)::before {      content: '';      display: table;      clear: both;    }}@media (min-wIDth: 1200px) {    .portfolio>.clear:nth-child(12n)::before {        content: '';      display: table;      clear: both;    }}

如果您更喜欢jquery路由(同样,这也假设您已经在包含投资组合元素的行中添加了一个类“投资组合”,以便更容易地定位)：

var row=$('.portfolio');$.each(row,function() {    var maxh=0;    $.each($(this).find('div[class^="col-"]'),function() {        if($(this).height() > maxh)            maxh=$(this).height();    });    $.each($(this).find('div[class^="col-"]'),function() {        $(this).height(maxh);    });});

总结

以上是内存溢出为你收集整理的html – 引导堆栈行中的间隙全部内容，希望文章能够帮你解决html – 引导堆栈行中的间隙所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。