Bootstrap Grid 响应式断行

Question

我目前正在使用引导网格系统并遇到以下问题：

当 > 平板电脑时，我得到了堆叠成 4 列的组件。 当

        <div class="col-xs-6 col-md-3">
            <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
          <div class="iconname">Test1</div>
          <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
          <div class="align-left"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
        </div>

http://jsfiddle.net/0q346dde/

这很好用，但是在 440px 和 485px 宽度之间，与： > ABCDE TEST1 PRODUCTS 的链接会出现中断行，因为没有空间了。它会一直发生，直到带有 > ABCDE TES PRODUCTS 的第二个链接（该标签的字符较少）中断。

现在我尝试设置“white-space: nowrap;”在链接上，但它看起来不太好

谁能帮帮我？

Answer 1

您需要为每一行使用带有row 类的容器div。 这样你就可以确保浮动被清除。

所以你会有：

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

Here's an updated fiddle

Answer 2

编辑：此答案适用于 bootstrap 3.x，4+ 版本使用不应受此问题影响的 flexbox 网格系统。

有时我将网格列从浮动更改为内联块以防止这种行为。 请记住清除列之间的每个空格，否则会破坏您的布局 (http://css-tricks.com/fighting-the-space-between-inline-block-elements/)。

.row.inline-block > *{display: inline-block; float: none; vertical-align: top;}

然后您可以将 .inline-block 类添加到您的行中

这是一个小提琴：http://jsfiddle.net/0q346dde/2/

奖励：内联块列也可以使用verical-align: middle; 垂直居中或使用vertical-align: bottom; 与底部对齐

Answer 3

在您的情况下，如果您看到 test3 图标上方 div 的高度随着屏幕尺寸的减小而增加，那么您必须根据您的要求固定该 div 的高度。例如。

CSS：

.test {
     height: 40px;
}

HTML：

<div class "row">
   <div class="col-xs-6 col-md-3">
       <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
       <div class="iconname">Test1</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
   <div class="col-xs-6 col-md-3">
       <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
       <div class="iconname">Test2</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
   <div class="col-xs-6 col-md-3">
       <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
       <div class="iconname">Test3</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
   <div class="col-xs-6 col-md-3">
       <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
       <div class="iconname">Test4</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
</div>