Question

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

当＆gt;我得到的组件在4列中堆叠在一起片剂。当＆lt; 2列时片剂。一些组件使用Links，一些没有。

        <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宽度之间，链接：＆gt; ABCDE TEST1产品因为没有空间而获得休息时间。它发生在第二个链接（哪个标签的字符较少）与＆gt; ABCDE TES PRODUCTS休息一下。

现在我试图设置“white-space：nowrap;”在链接上，但它看起来不会很好＆lt; 400px，因为它们相互重叠。

任何人都可以帮助我？

Answer 1

有时我将网格块从浮动更改为内联块以防止出现这种行为，只需记住清除列之间的每个文件空间，否则会破坏您的布局（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/

Answer 2

在您的情况下，如果您看到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>

Answer 3

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

所以你有：

<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

Bootstrap网格响应中断行

3 个答案: