Bootstrap网格响应中断行

Question

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

>平板电脑时，我将组件堆叠成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会出现中断行，因为不再有空间。它会一直持续到带有> ABCDE TES PRODUCTS的第二个链接（该标签的字符较少）中断。

现在，我尝试设置“空白：nowrap;”。在链接上，但<400px看起来效果不好，因为它们相互重叠。

有人可以帮助我吗？

Answer 1

编辑：此答案适用于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;