如何并排显示帖子?

时间:2017-11-21 11:16:30

标签: wordpress twitter-bootstrap

我在下面创建了WordPress循环,以并排显示某个类别的帖子。我遇到了麻烦,因为它们显示在彼此之上。我正在使用Bootstrap 4

<?php

    $args = array(
        'category_name'     => 'featured',
        'posts_per_page'    => 4
    );

    $the_query = new WP_Query($args);

    ?>

    <?php if($the_query->have_posts()): while($the_query->have_posts()): $the_query->the_post(); ?>

    <div class="row featured-row">

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

        <?php the_post_thumbnail( 'fimage', array('class' => 'img-fluid') ); ?>
        <h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
        <em>Posted on - <?php echo get_the_date(); ?></em>
        <em>Written by - <?php the_author(); ?></em>

        </div>

        <?php endwhile; ?>
        <?php endif; ?>
        <hr>
    </div>
    <?php wp_reset_postdata(); ?>

2 个答案:

答案 0 :(得分:1)

试试这些:

<?php

    $args = array(
        'category_name'     => 'featured',
        'posts_per_page'    => 4
    );

    $the_query = new WP_Query($args);

    ?>
<?php if($the_query->have_posts()): ?>
    <div class="row featured-row">
        <?php while($the_query->have_posts()): $the_query->the_post(); ?>
            <div class="col-md-3">
                <?php the_post_thumbnail( 'fimage', array('class' => 'img-fluid') ); ?>
                <h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
                <em>Posted on - <?php echo get_the_date(); ?></em>
                <em>Written by - <?php the_author(); ?></em>
            </div>
        <?php endwhile; ?>
    </div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

答案 1 :(得分:0)

将你的div与循环外的类行放在一起。使用以下代码

<StackPanel Orientation="Vertical" VerticalAlignment="Center">
                <customControls:ImageButton x:Name="BtnUndo" Height="30" Width="30" ImageSource="..\Images\undo.png" ToolTip="Undo" HorizontalAlignment="Center" VerticalAlignment="Top" Click="BtnUndo_Click" IsEnabled="False" Focusable="False"/>
                <customControls:ImageButton x:Name="BtnRedo" Margin="0,2,0,2" Height="30" Width="30" ImageSource="..\Images\redo.png" ToolTip="Redo" HorizontalAlignment="Center" VerticalAlignment="Top" Click="BtnRedo_Click" IsEnabled="False" Focusable="False"/>
                <customControls:ImageButton x:Name="BtnClear" Height="30" Width="30" ImageSource="..\Images\clear.png" ToolTip="Clear" HorizontalAlignment="Center" VerticalAlignment="Top" Click="BtnClear_Click" IsEnabled="False" Focusable="False"/>
                <customControls:ImageButton x:Name="BtnDeleteTarget" Margin="60,-60,0,2" Height="30" Width="30" ImageSource="..\Images\clear.png" ToolTip="Clear" HorizontalAlignment="Center" VerticalAlignment="Top" Click="DeleteTarget_Click" IsEnabled="True" Focusable="False"/>
            </StackPanel>