列之间的Bootstrap间隙

时间：2014-06-30 16:06:38

标签： twitter-bootstrap-3

请参阅：http://www.anniestasjes.nl/40/producten.html?category=tassen 我使用bootstrap 3进行响应式布局。我在产品之间存在巨大的差距，因为有时产品标题占用两行而div的高度比其他产品略高。有人知道解决这个问题吗？

4 个答案:

答案 0 :(得分：7)

确保您使用的是最新版本的Bootstrap（目前为v3.2.0）。

新增的响应式实用程序将帮助您完成此操作，如文档here中所述。

在＆＃34;行＆＃34;

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

说明：

  

响应列重置

     

您可以使用四层网格   必然会遇到某些断点的列问题   当一个人比另一个人高时，不要说清楚。为了解决这个问题   使用.clearfix和我们的响应实用程序类的组合。

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

请注意，正如@ sean-ryan指出的那样，您应该使用.row类而不是旧的row-fluid，并且不应该将整个列包装在锚标记中。我已在下面更正了（并相应调整了Bootply中的css）。

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

如果所有这些对你来说都是太多的标记，你可以使用jQuery来自动进行调整，如下所示：

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);
    });
});

答案 1 :(得分：0)

两种简单的方法，每种方法都有自己的缺点：

1）设置产品容器的固定高度：.product{height:300px}。这只有在您了解产品描述的最大行数时才有效。

2）将每一行产品放入他们自己的.row：<div class="row"><div class="col-md-4 col-...">...这只适用于您没有动态行（例如总是3行）看着您的示例我认为你不是。

一种更动态的处理方法是使用一些javascript来读取给定行（而不是.row）中最高的.product容器的计算高度，并为它的邻居分配相同的高度......但是现在这超出了我的范围:)）

答案 2 :(得分：0)

您的主要问题是您没有正确使用网格系统。

您的问题是，您有一个div.row，然后您将所有产品<div>放入。通常，一个.row最多只能包含12列每个尺寸。你可以去做更多，但只有你确保任何特定尺寸的总数是12倍，否则你最终会得到悬空盒。正如开头所述，一个.row中的33个绝对不是正确的方法。

这是对以下内容的补充：

    在Bootstrap 3中，
  1. .row-fluid不再存在。它现在只是.row。
  2. 您不应该在<a>标记中包装列。如果要这样做，请改为包装列的内容。
  3. 一旦列连续出现，就需要留在那一行。通过.col-[SIZE]-[N]更改列应该用于更改特定容器的宽度，而不是向行添加更多容器。换句话说，从每行两个产品到三到四个都不会发生。
  4. 如果您已宣布.col-lg-4，则无需声明.col-md-4。 Bootstrap的网格系统级联起来，这意味着最后声明的尺寸适用于所有较大尺寸。

    5. 我建议您花一些时间回过头来熟悉一下Bootstrap的网格系统是如何通过文档或在SO上提出的任何有用的问题答案。

    所有这一切，有一种方法可以让你从每行两个产品转到四个产品。有关基本工作示例，请参阅http://www.bootply.com/rymvydjpDn，代码如下：

    <div class="row">
  <div class="col-xs-6">
    <div class="row">
      <div class="col-md-6">
        CONTENT...
      </div>
      <div class="col-md-6">
        CONTENT...
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="row">
      <div class="col-md-6">
        CONTENT...
      </div>
      <div class="col-md-6">
        CONTENT...
      </div>
    </div>
  </div>
</div>

    采用上述解决方案的另一种方法，没有所有嵌套：http://www.bootply.com/fB84B9ovrF 

    <div class="row">
  <div class="col-md-3 col-xs-6">
    CONTENT...
  </div>
  <div class="col-md-3 col-xs-6">
    CONTENT...
  </div>
  <div class="col-md-3 col-xs-6">
    CONTENT...
  </div>
  <div class="col-md-3 col-xs-6">
    CONTENT...
  </div>
</div>

答案 3 :(得分：0)

只需对每个div使用pull-left类，这样它们就会自动向左浮动或

每一行都像

一样 
<div class="row">
    <div class="col-md-2">prod1</div>
    <div class="col-md-2">prod2</div>
    <div class="col-md-2">prod3</div>
</div>
<div class="row">
    <div class="col-md-2">prod4</div>
    <div class="col-md-2">prod5</div>
    <div class="col-md-2">prod6</div>
</div>
相关问题
最新问题