Question

我在bootstrap中使用col-md-6类将我的内容排列成两个50％的列。

以下是它的外观以及我希望它的外观。左边的那个是它的样子，右边的那个是我想要的样子：

标题看起来很好，但其余的内容却没有。

另外，出于某种原因，第三个标题落后于底部，而不是与第四个标题对齐（我不知道为什么）。

代码：

<div class="container">
<div class="row">
    <?php

    while ($query->have_posts())
    {
        $query->the_post();

        ?>

        <div class="col-md-6">

            <h2><a href="<?php the_permalink(); ?>" align="middle"><?php the_title(); ?></a></h2>
            <a href="<?php the_permalink(); ?>">
                <?php

                if ( has_post_thumbnail() ) {
                    echo '<p>';
                    the_post_thumbnail("small");
                    echo '</p>';
                }
            ?>
            </a>
            <p><br /><?php the_excerpt(); ?><p>
            <div class="alert alert-dismissible alert-info">
                <h3>Free trial available?</h3>
                <p><?php the_field('free'); ?></p>
            </div>

        </div>

        <?php
    }
    ?>

</div>
</div>

Answer 1

<div class="container">
    <?php
    $i=0;
    while ($query->have_posts())
    {
        if($i%2==0)
            echo '<div class="row">';
        $query->the_post();

        ?>

        <div class="col-md-6" >
           <div style="height:600px">
            <h2><a href="<?php the_permalink(); ?>" align="middle"><?php the_title(); ?></a></h2>
            <a href="<?php the_permalink(); ?>">
                <?php

                if ( has_post_thumbnail() ) {
                    echo '<p>';
                    the_post_thumbnail("small");
                    echo '</p>';
                }
            ?>
            </a>
            <p><br /><?php the_excerpt(); ?><p>
            </div>
            <div class="alert alert-dismissible alert-info">
                <h3>Free trial available?</h3>
                <p><?php the_field('free'); ?></p>
            </div>

        </div>

        <?php
        if($i%2!=0)
            echo '</div>';
        $i++;
    }
    ?>

</div>

Answer 2

这样做：

＆＃13;

/* CSS used here will be applied after bootstrap.css */
.content1{
  background-color:red;
}

.content2{
  background-color:blue;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
 <div class="col-md-6 content1">
 <h1> CONTENT</h1><h1>
   <p>xxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx</p>
</h1></div> 
<div class="col-md-6 content2">
  <h1> CONTENT</h1><h1>
   <p>xxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx</p>
</h1></div> 

</div>
</div>

＆＃13;

在列中创建订单

2 个答案: