列之间的引导间隙答案

【问题标题】：Bootstrap gaps between columns列之间的引导间隙
【发布时间】：2014-08-21 01:51:34
【问题描述】：

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

【问题讨论】：

标签： twitter-bootstrap-3

【解决方案1】：

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

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

在“行”之间插入这个 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 类而不是旧的行流体，并且您不应该将整个列包装在锚标记中。我已经在下面更正了（并相应地调整了 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);
    });
});

【讨论】：

赞成答案的 HTML 部分。纯粹出于布局原因使用 javascript 是一种糟糕的巫术。
这太棒了.. 谢谢！
@Matish，谢谢...您可能也想看看这个答案：stackoverflow.com/questions/24571062/…，我提供了一个简单的解决方案，用于使用通用元素和媒体处理大量动态生成的内容查询，而不是响应式类。这是 Bootply：bootply.com/U91pZvp81q

【解决方案2】：

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

您的问题是您有一个div.row，然后您将所有产品<div>s 放入其中。通常，一个.row 的每个尺寸最多只能有12 列。你可以做得更多，但前提是你要确保任何特定尺寸的总和是 12 倍，否则你最终会得到悬空的盒子。而且如开头所说，33合一.row绝对不是正确的做法。

这是对以下内容的补充：

.row-fluid 在 Bootstrap 3 中不再存在。现在只是 .row。
您不应将列包装在<a> 标记中。如果您打算这样做，请改为包装列的内容。
一旦列在一行中，它就需要留在该行中。通过.col-[SIZE]-[N] 更改列应该是为了更改该特定容器的宽度，而不是在一行中添加更多容器。换句话说，从每行两个产品变成三到四个是不可能的。
如果您已经声明了.col-md-4，则无需声明.col-lg-4。 Bootstrap 的网格系统级联，这意味着最后声明的大小适用于所有较大的大小。

我建议您花一些时间回过头来熟悉 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>

【讨论】：

很抱歉投了反对票。您的答案中的所有内容都很好，但是第一个声明是一个 .row 最多应包含 12 列，因此将所有列放在一行中是“完全错误的”——嗯，这完全是错误的。这就是网格系统的美妙之处，它的基本租户之一是能够在不同的断点处拥有不同的布局。甚至您的示例也表明，因为在 xs/sm 大小下，内行将有两个元素，总共代表 24 列。
虽然在较小的屏幕尺寸下该“行”的总列数确实为 24，但对于默认 Bootstrap，每个 <div class="row"> 仅包含 12 列，并且应该只包含 12 列，即我提出的观点。如果每个 div.row 元素内的总列数超过 12，则该行将无法按预期运行。我通过嵌套解决了这个问题，但只能继续在该规则内操作。如果你有一个 div.row 元素的好例子，每个屏幕尺寸包含超过 12 列并且仍然正常运行，我很乐意看到它。
网格的设计方式允许元素在不同的屏幕尺寸下占据多条“线”。 OP 想要 md 及以上的 3 个项目，sm 的 4 个项目和 xs 的 2 个项目。这只有通过不像您所做的那样将元素包装和嵌套在单独的行中来实现（并且完全正确）。 12 仅表示在元素环绕到下一个“行”之前可以占据单个水平空间的网格单元的总数。您可以或应该只将总共 12 个列单元放置在具有行类的单个 div 中，这是不正确的。
虽然您可以在单个 .row 中放置超过 12 列，但通常避免它是明智的，因为它会导致 OP 所示的确切行为。为了进一步说明我的观点，对于 OP 没有一个单一的答案，即 1. 完成 OP 正在寻找的内容，而 2. 使用网格系统而不使用非网格类或更糟糕的是 javascript。但是，我愿意修改我的声明：.row 中的每个尺寸的总和应为 12 倍，否则您最终会得到一个悬空的盒子。尽管如此，将 33 个 div.col-*-* 放在一个 .row 中仍然是一种糟糕的做法。
我想我们必须同意不同意......顺便说一句，我发布了一个答案，它直接使用文档中的 Bootstrap 标记来解决没有 javascript 的问题。

【解决方案3】：

只需为每个 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>

【讨论】：

float:left 已经是任何 col-- 类的一部分，因此添加 .pull-left 将是多余的。

【解决方案4】：

两种简单的方法可以做到这一点，每种方法都有自己的缺点：

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

2) 将每行产品放入自己的 .row: <div class="row"><div class="col-md-4 col-...">... 这仅适用于您可以不让行动态（例如总是 3 行），看看您的示例，我认为您不是.

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

【讨论】：