Bootstrap 网格响应式断行

Question

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

当 > 平板电脑时，我得到的组件在 4 列中堆叠在一起。当 < 平板电脑时，在 2 列中。有些组件有链接，有些没有。

        <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 的 link 会换行，因为不再有 space。它一直发生到第二个 link（标签字符较少）> ABCDE TES PRODUCTS 中断。

现在我已经尝试在 link 上设置 "white-space: nowrap;"，但是 < 400px 看起来不太好，因为它们相互重叠。

谁能帮帮我？

Answer 1

您需要为每一行使用一个容器 div 和 row class。通过这种方式，您可以确保清除浮动。

所以你将拥有：

<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 class 到你的行

这里是 fiddle：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>

Bootstrap 网格响应式断行

Bootstrap Grid Responsive break row

css

grid

line-breaks

dynamic-columns

twitter-bootstrap