Question

我想使用3列（col-md-4）嵌套在col-md-9中。为此，我使用以下代码：

<?php if (have_posts()){ ?>
<section class="container container-fluid">  
      <div class="row" id="ajaxPostContainer">
        <div class="col-md-9">

        <?php
        ini_set("display_errors", 1);

        while (have_posts()){
            the_post();
        $post_uri           = get_permalink();
        $post_image         = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) );

        $content            = get_the_content();
        $content            = preg_replace('/<a href=\"(.*?)\">(.*?)<\/a>/', "\\2", $content);            
    ?>

     <div class="col-md-4" data-categories="" style="" >
        <a href="<?=$post_uri?>" title="">

                <?php if($post_image !== false){ ?>
                 <article>
                <img src="<?=$post_image?>" class="img-responsive" style="width: 100%;" />
                <?php } ?>
                <h3><?=the_title('', '', false)?></h3>
                <div class="entry">
                <p><?=$content?></p>

        </article>
        <hr />
        </a>
        </div>   




    <?php } ?>
    </div>
    <div class="col-md-3">
        <div class="sidebar">
            <?php dynamic_sidebar("single-post"); ?>
        </div><!-- sidebar --> 
    </div>  

</div></div>

但是在某些行中，col-md-4的3个列中断了。为什么？例如在此页面上：

https://www.immvestwolf.de/blog/eigentumswohnungen-leipzig

Answer 1

您可以添加一个<div class="row">来将3个col-md-4 div包装在<div class="col-md-9">中。这样可以减少一些填充，从而不会出现换行符：

示例（需要对其进行测试）：

<?php if (have_posts()){ ?>
    <section class="container container-fluid">  
      <div class="row" id="ajaxPostContainer">
        <div class="col-md-9">
            <div class="row">
                <?php
                ini_set("display_errors", 1);

                while (have_posts()){
                    the_post();
                    $post_uri           = get_permalink();
                    $post_image         = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) );

                    $content            = get_the_content();
                    $content            = preg_replace('/<a href=\"(.*?)\">(.*?)<\/a>/', "\\2", $content);            
                    ?>


                    <div class="col-md-4" data-categories="" style="" >
                        <a href="<?=$post_uri?>" title="">

                            <?php if($post_image !== false){ ?>
                               <article>
                                <img src="<?=$post_image?>" class="img-responsive" style="width: 100%;" />
                            <?php } ?>
                            <h3><?=the_title('', '', false)?></h3>
                            <div class="entry">
                                <p><?=$content?></p>

                            </article>
                            <hr />
                        </a>
                    </div>   


                <?php } ?>
            </div> 
        </div>
        <div class="col-md-3">
            <div class="sidebar">
                <?php dynamic_sidebar("single-post"); ?>
            </div><!-- sidebar --> 
        </div>  

    </div>
</div>

Answer 2

看该站点，似乎是由于您所有列的高度都不同所致。尝试添加height: 800px，您会发现它现在可以使用了。看起来也更好；）

为使外观更好看，请确保将文本剪裁超过一定长度，然后可以降低高度。

使用Bootstrap col-md-4网格，但会中断

2 个答案: