Bootstrap 3rd col 在第二行 3/4 列后中断答案

【问题标题】：Bootstrap 3rd col breaks after 2nd row of 3/4 columnsBootstrap 3rd col 在第二行 3/4 列后中断
【发布时间】：2014-09-03 08:57:23
【问题描述】：

我正在使用引导式 wordpress 设计，并且正在使用一些 PHP 来输出帖子。

但是，使用任何方法，无论是 col-3、col-4、col-2，我都会在它自己的列中正确对齐单个投资组合项目，然后返回正确的列。

这是我的代码：

<article id="post-<?php the_ID(); ?>" <?php post_class('col-lg-4 col-sm-4 pbox'); ?>>

    <?php
        $thumb = get_post_thumbnail_id();
        $img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
        $image = aq_resize( $img_url, 720, 560, true ); //resize & crop the image
    ?>

    <?php if($image) : ?>
    <a href="<?php the_permalink(); ?>"> <img class="img-responsive" src="<?php echo $image ?>"/></a>
    <?php endif; ?> 

    <h2 class="box-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <div class="box-meta"><?php the_category(', '); ?></div>    
    <div class="entry-summary">
        <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->

这是我的问题的图形示例： - http://i.stack.imgur.com/xMFQY.png

附加 CSS：

.pbox{margin-bottom: 30px;}

感谢您的帮助！

【问题讨论】：

发布了您的问题的答案。如果您需要更详细的帮助，请发布从您的 PHP 代码生成的 HTML，以便我可以为您提供一个工作示例。
或者您可以将生成的 html 和 CSS 复制/粘贴到 bootply bootply.com 并找出问题所在。 bootply 是练习引导相关问题的最佳场所。

标签： php css wordpress twitter-bootstrap

【解决方案1】：

我曾经遇到过同样的问题，这是因为每列的高度不同。我分配了一个固定的列高，事情开始看起来不错。这是我的帖子，直到我弄清楚自己之前没有人回答https://drupal.stackexchange.com/questions/119009/responsive-bootstrap-grid-with-6-columns-of-equal-heights

看下面的测试，我刚才做了（第二行第三列是200x190，其他都是200x200）

200x190 使最后一个 div 向右移动。但是，如果我们为每个 div 分配一个固定的高度，那么事情看起来正常如下（第二行第三个 div 仍然是 200x190

现在是下面的

所以我建议仅出于测试目的，添加 height:200px;到你的 .pbox 看看会发生什么。

【讨论】：

谢谢 Raf，将 height:560px 添加到 .pbox 类已经解决了这个问题，只是为了澄清@fizzix 上面所说的，哪个是更合适的解决方案？
两者都可以，我没试过他的方案，不知道效果如何。当谈到我的解决方案时，如果您担心所有设备的固定高度，那么您可以通过为不同的视口提供不同的固定宽度来解决这个问题，例如，大屏幕为 560 像素，中屏可能为 360 像素等。我的解决方案完美地为我工作。有关媒体查询，请参阅 getbootstrap.com/css/#grid，不要忘记将任何适合您的解决方案标记为 Answer

【解决方案2】：

好像是浮动的问题。

我建议将以下内容添加到之前：

<div class="clearfix"></div>

这是一个内置的 Boostrap 类，可以清除所有浮点数。

如果您只想将其应用于特定宽度，请尝试以下操作：

<div class="clearfix hidden-xs"></div>

您可以看到响应式实用程序列表here。

【讨论】：