引导程序中每行超过12个列 [英] More than 12 cols per row in bootstrap

问题描述

我正在检查引导程序3.2.0中每行的12列，并根据引导程序和这篇文章这是完全可以的。

I am going over the 12 columns per row in bootstrap 3.2.0, and according to bootstrap and this post this is totally OK.

如果在一行中放置超过12列，则每组额外的列将作为一个单元包装到新行上。

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

我遇到的问题是，当我使用4 col-md-4 时，我得到了第四列，如下图所示。

The problem I have is that when I use 4 col-md-4 I get the 4th column to the right like the picture below.

<div class="row">
  <div class="col-md-4">
    <a href="#" title="Test">
      <img width="225" height="150" src="blog.jpg />
    </a>

    <h4>
      <a href="#" title="Test">Test</a>
    </h4>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio nisi, sodales nec commodo at, viverra eget eros. In hac habitasse platea dictumst. Sed semper […]</p><!-- EXCERPT -->

     <p><a href="#" title="Read More">Read More</a></p>
  </div>
  <div class="col-md-4">
      //Loop Repeats
  </div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

如果我添加第5个或第6个，则所有内容都将很好地浮动到左侧，如下图所示。

If I add a 5th or even 6th one, everything floats to the left nicely like in the image below.

<div class="row">
  <div class="col-md-4">
     //Loop Repeats
  </div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

有什么想法吗？

推荐答案

图像为您提供了答案。

The image is giving you the answer.

就像您说的那样，Bootstrap将列向左浮动。浮动模型意味着该元素将浮动到左侧，从而阻止下一个元素的流动。因此，在您的第一张图片中，请查看第二列第一行的长度如何稍长，并且可能有一些边距和填充，从而阻碍了下一行中元素的流动。在第二张图片中，您看不到它，因为长元素在侧面。症状的最佳描述由您自己提供：

See, Bootstrap floats the columns to the left, just as you say. The float model means that the element will be floated to the left blocking the flow of the next element. Thus, in your first picture, see how your second column, first row is slightly longer and probably has some margin and padding which is blocking the flow of the element in that following row. In the second picture you don't see it because the long element is at the side. And the best description of a symptom was given by yourself:

我正在通过自定义
中的wordpress循环生成此内容简码，我注意到如果以某种方式在
简码函数中删除此行，则该列会像下面的jsFiddle一样浮动：

I am generating this content through a wordpress loop in a custom shortcode, and I noticed that somehow if I remove this line in the Shortcode function the columns float just fine as in this jsFiddle:

$ output。='< p>'。 get_the_excerpt（）。 ’< / p>’;

有。摘录在包含块的长度上某种程度上是随机的，所以您的问题几乎是每天都会发生在任何WP开发人员身上的。解决方法有很多，但最简单的方法是：

There you have. The excerpt is somehow 'randomish' in the length of the containing block, so your problem is something that happens almost every single day to any WP developer. There are many different ways to solve it, but the easiest one is this:

.col-md-4{min-height:400px /* test the height you need to enable normal flow of the floats */}

，问题解决了！

这篇关于引导程序中每行超过12个列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！