列之间的引导间隙 [英] Bootstrap gaps between columns

查看：25
本文介绍了列之间的引导间隙的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请参阅:http://www.anniestasjes.nl/40/producten.html?category=tassen我使用 bootstrap 3 进行响应式布局.我得到产品之间的巨大差距，因为有时产品标题会占据两行，而 div 的高度比其他产品高一点.有人知道解决方法吗?

解决方案

确保您使用的是最新版本的 Bootstrap(当前为 v3.2.0).

新添加的响应式实用程序将帮助您完成此操作，如此处的文档中所述.

在行"之间插入这个 div:

<!-- 仅为所需的视口添加额外的清除修复 --><div class="clearfix visible-xs-block"></div>

说明:

<块引用>

响应列重置

有了四层可用的网格，您就可以一定会遇到问题，在某些断点处，您的列不太清楚，因为一个比另一个高.为了解决这个问题，结合使用 .clearfix 和我们的响应式实用程序类.

因此，在您的情况下，您需要在每三个元素之后为每个 lg/md 断点添加一个 clearfix；对于每四个元素之后的 sm 元素；并且对于每个第二个元素之后的每个 xs 元素.这是一个 Bootply 示例，展示了它的外观.

请注意，正如@sean-ryan 所指出的，您应该使用 .row 类而不是旧的 row-fluid，并且您不应该将整列包裹在锚点中标签.我已经在下面更正了(并相应地调整了 Bootply 中的 css).

<div class="row products"><div class="col-md-4 col-sm-3 col-xs-6 product"><a href="/40/128/cowboysbag-the-bag-black.html"><img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/图片_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0"><h4>牛仔包The Bag"黑色</h4><div class="price">€ 129,95</div></a>
<div class="col-md-4 col-sm-3 col-xs-6 product"><a href="/40/128/cowboysbag-the-bag-black.html"><img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/图片_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0"><h4>另一个 Dynamite 包的标题要长得多，需要包装</h4><div class="price">€ 129,95</div></a>

<div class="visible-xs-block clearfix"></div><div class="col-md-4 col-sm-3 col-xs-6 product"><a href="/40/128/cowboysbag-the-bag-black.html"><img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/图片_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0"><h4>热门手提包</h4><div class="price">€ 129,95</div></a>

<div class="visible-lg-block visible-md-block clearfix"></div><div class="col-md-4 col-sm-3 col-xs-6 product"><a href="/40/128/cowboysbag-the-bag-black.html"><img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/图片_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0"><h4>我觉得我最喜欢Green bag</h4><div class="price">€ 129,95</div></a>

<div class="visible-sm-block visible-xs-block clearfix"></div><div class="col-md-4 col-sm-3 col-xs-6 product"><a href="/40/128/cowboysbag-the-bag-black.html"><img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/图片_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0"><h4>我猜 Tassen 是荷兰语的 bag</h4><div class="price">€ 129,95</div></a>

<div class="col-md-4 col-sm-3 col-xs-6 product"><a href="/40/128/cowboysbag-the-bag-black.html"><img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/图片_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0"><h4>在德语中，bag 是 Tasche oder Handtasche(手提包)</h4><div class="price">€ 129,95</div></a>

<div class="visible-lg-block visible-md-block visible-xs-block clearfix"></div><div class="col-md-4 col-sm-3 col-xs-6 product"><a href="/40/128/cowboysbag-the-bag-black.html"><img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/图片_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0"><h4>这是另一个手提包</h4><div class="price">€ 129,95</div></a>

<div class="col-md-4 col-sm-3 col-xs-6 product"><a href="/40/128/cowboysbag-the-bag-black.html"><img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/图片_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0"><h4>又一个很酷的包</h4><div class="price">€ 129,95</div></a>

<div class="visible-sm-block visible-xs-block clearfix"></div><div class="col-md-4 col-sm-3 col-xs-6 product"><a href="/40/128/cowboysbag-the-bag-black.html"><img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/图片_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0"><h4>牛仔包The Bag"黑色</h4><div class="price">€ 129,95</div></a>

<!--/row -->

<!--/容器-->

如果所有这些对您来说都太多了，您可以使用 jQuery 来自动进行如下调整:

var row=$('.row');$.each(row, function() {无功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);});});

See: http://www.anniestasjes.nl/40/producten.html?category=tassen I use bootstrap 3 for responsive layout. I get these huge gaps between products because sometimes the product title takes up two rows and the height of the div is a bit more then the other products. Someone knows a fix for this?

解决方案

Make sure you're using the latest version of Bootstrap (currently v3.2.0).

The newly added responsive utilities will help you to accomplish this, as described in the documentation here.

Insert this div between the "rows":

<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>

Explanation:

Responsive 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.

So, in your case, you need to have a clearfix added for each of the lg/md breakpoints after every third element; for the sm elements after every fourth element; and for every xs element after every second element. Here's a Bootply example of how that would look.

Please note that as pointed out by @sean-ryan, you should be using the .row class instead of the old row-fluid, and you should not be wrapping the entire column in an anchor tag. I've corrected that below (and adjusted your css in the Bootply accordingly).

<div class="container">
    <div class="row products">
        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>Cowboysbag 'The Bag' Black</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>
        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>Another Dynamite bag with a much longer title that will need to wrap</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-xs-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>A hot handbag</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-lg-block visible-md-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>I think I like the Green bag most</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-sm-block visible-xs-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>I guess Tassen is Dutch for bag</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>
        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>In German, bag is Tasche oder Handtasche (handbag)</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-lg-block visible-md-block visible-xs-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>This is another handbag</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>
        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>Yet another cool bag</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-sm-block visible-xs-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>Cowboysbag 'The Bag' Black</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>
    </div> <!-- /row -->
</div> <!-- /container -->

If all of this is just too much markup for you, you can use jQuery instead to make the adjustments automatically as follows:

var row=$('.row');
$.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);
    });
});

这篇关于列之间的引导间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆