CSS Bootstrap Grid 响应式中断行

Bootstrap Grid Responsive break row

提问by Fl0R1D3R

I'm currently working with bootstrap grid system and got the following problem:

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

I got components that stack together in 4 columns when > tablet. and in 2 columns when < tablet. Some of the components are with Links and some without.

当 > 平板电脑时，我得到了在 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/

http://jsfiddle.net/0q346dde/

This works fine, but between 440px and 485px width, the link with: > ABCDE TEST1 PRODUCTS gets a break row since there is no space any more. It occurs until the second link (which label has less characters) with > ABCDE TES PRODUCTS gets a break.

这工作正常，但在 440px 和 485px 宽度之间，链接：> ABCDE TEST1 PRODUCTS 得到一个中断行，因为不再有空间。它发生直到第二个链接（该标签的字符较少）与 > ABCDE TES PRODUCTS 中断。

Now I've tried to set "white-space: nowrap;" on the links, but then it won't look good < 400px, since they overlap each other.

现在我尝试设置“white-space: nowrap;” 在链接上，但是 <400px 看起来不太好，因为它们彼此重叠。

Anyone can help me?

任何人都可以帮助我吗？

回答by Dax

EDIT: This answer is meant for bootstrap 3.x, the 4+ version use a flexbox grid system that shouldn't be affected by this problem.

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

Sometimes i change the grid columns from floating to inline-block to prevent this kind of behavior. Remember to clear every withespace between your columns or it will break your layout (http://css-tricks.com/fighting-the-space-between-inline-block-elements/).

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

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

Then you can just add .inline-block class to your row

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

Here's a fiddle: http://jsfiddle.net/0q346dde/2/

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

BONUS: The inline-block columns can also be vertically centered with verical-align: middle;or aligned to the bottom with vertical-align: bottom;

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

回答by J Prakash

In your case if you see the height of div above test3 icon increases as the screen size decreases so you have to fixed the height of that div according to your requirements. For example.

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

Css:

css：

.test {
     height: 40px;
}

HTML:

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>

回答by Caelea

You need to use the use a container divwith the rowclass for each line. This way you make sure the floats are being cleared.

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

So you'll have:

所以你会有：

<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

这是一个更新的小提琴