Question

我正在为我的网站使用Bootstrap 4。

但是我的专栏在彼此之间而不是彼此相邻。这是我的问题的屏幕截图

我希望相邻的有4列，而其他的要放在该行的下面。

这是我的HTML代码：

<section class="menu">
    <div class="container">
    <div class="row">
        <div class="menu-slider">
            <div>
                <div class="text-center">
                    <h1 class="text-center">Dranken</h1>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/introduction-image.png" class="menu-img-seperator">
                    <?php
                    $args = array(
                        'post_type' => 'menu',
                        'categories'=> 'frisdranken-per-glas');

                        $my_query = new WP_Query( $args );
                        ?> <div class="col-md-4"><h3>Frisdranken per glas</h3> <?php
                        if( $my_query->have_posts() ) {
                            while ($my_query->have_posts()) : $my_query->the_post(); ?>
                                    <span style="font-weight: bold; font-style: cursive;"><?php the_title(); ?></span> - €<?php the_field('menu_price'); ?>,-<br>
                        <?php
                            endwhile;
                        }
                        ?> </div> <?php 
                        wp_reset_query();
                    ?>
            </div>
         </div>
      </div>
  </div>
</section>

Answer 1

好的，我对您的问题不太了解，但是如果您想在同一行中放入4个列，则可以使用col-md-3而不是col-md-4（12/4 = 3） ;另一方是bootstarp 4，它是将cols放在行容器中的，我知道在循环中创建行容器很棘手，因此您可以将函数或模板中的表示形式分开，我想您正在使用wordpress

function visual_presentation($key, $nama){ //$key = frisdranken-per-glas $name = Frisdranken per glas
    $args = array(
        'post_type' => 'menu',
        'categories'=> $key);

    $my_query = new WP_Query( $args ); 
    if( $my_query->have_posts() ) : ?> 
        <div class="row">
            <div class="col-md-12">
                <h3><?= $name ?></h3>
            </div>
        </div>
        <?php       
        while ($my_query->have_posts()) : $my_query->the_post(); ?>
            <div class="row">
                <div class="col-md-3">
                    <span style="font-weight: bold; font-style: cursive;">  
                        <?php the_title(); ?>
                    </span> - €<?php the_field('menu_price'); ?>,-<br>
                </div>
            </div>
        <?php endwhile;
    endif;

    wp_reset_query();
}


<img src="<?php echo get_template_directory_uri(); ?>/assets/images/introduction-image.png" class="menu-img-seperator">
<?php
visual_presentation('frisdranken-per-glas', "Frisdranken per glas");
visual_presentation('frisdranken-per-fles', "Frisdranken per fles");
?>

Bootstrap 4将列相互放置

1 个答案: