Question

我正在使用带有WordPress的Bootstrap。我正在更新个人资料页面，该页面显示一个人的图像及其标题为文本。我正在使用一个简单的循环。有4个配置文件要显示，所以我设置了以下内容：

class="col-xs-6 col-sm-6 col-md-3 col-lr-3"

但是在移动视图xs-6中，所有内容都正常显示，第三个配置文件不在左侧，而是在右侧，导致空白区域应该是。

    <?php
/*
Template Name: Committee
*/
?>
<?php get_header(); ?>
<div class="container">
 <div id="section" class="clearfix row">
  <div class="col-lg-12">
     <h1>Committee</h1>

  <?php 
              $temp_query = $wp_query;

              query_posts(array(
                'category_name' => 'committee', 
                'orderby' => 'date',
                'order' => 'desc',
                'paged'=> $paged,
                /*'posts_per_page' => 10,*/
                'perm'=>'readable'

              ));
              if(have_posts()) : while(have_posts()) : the_post();
            ?>

            <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3" id="artists-gallery">

             <a class="profile-img" href="" data-toggle="modal" data-target="#myModal"><img src="<?php the_field('image');?>" alt=""/></a>
                  <p><?php the_field('name');?></p>
                  <p><?php the_field('title');?></p>


                      <div id="myModal" class="modal fade" role="dialog">
                        <div class="modal-dialog">

                        <!-- Modal content-->
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title"><?php the_title();?></h4>
                            </div>
                          <div class="modal-body">
                            <p><?php the_content();?></p>
                          </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                          </div>
                        </div>
                      </div>
                </div><!--end of artists gallery-->
                  <?php endwhile;?>
<!--<div class="next-post"><?php next_posts_link('Next >') ?></div>
    <div class="prev-post"><?php previous_posts_link('< Previous') ?></div>-->

              <?php else : ?>

              <p><?php _e( 'Sorry, no pages found.' ); ?></p>

           <?php endif; ?>

      </div>
  </div><!--end of section-->
</div><!--end of container-->
<?php get_footer(); ?>

    `.profile-img img {
  border-radius: 2.5px;
  border: 1px solid #da2777;
  margin: 5px 0 5px 0; }

#artists-gallery img {
  max-width: 100%;
  height: auto; }`

full width lr 3

mobile view xs-6

Answer 1

我猜它是因为你的个人资料是不同的高度。在我看来，配置文件1比配置文件2更高，由于浮动工作的方式，这使得引导网格有点混乱。

您可以通过确保配置文件的高度相同，或者使用不同的布局工具（如砌体）来纠正它。

图像未在移动视图引导程序中正确堆叠

1 个答案: