在移動視圖中未正確堆疊的圖像bootstrap

我正在使用Bootstrap和WordPress。我正在更新一個個人資料頁面，顯示一個人的圖像和他們的標題爲文本。我正在使用一個簡單的循環。有4個配置文件來顯示，所以我已經設置如下：在移動視圖中未正確堆疊的圖像bootstrap

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

來源

2016-07-25 Simon Tucker

你可以添加更多的CSS代碼和你的html代碼，這樣我們就可以更好地理解最新進展 – crazymatt

你可以把你的代碼在線嗎？也許，在JsFiddle或其他？ –

我會想這是因爲你的配置文件是不同的高度。在我看來，配置文件1比配置文件2高，這是由於浮動工作方式導致混亂的引導網格。

您可以通過確保配置文件高度相同或使用不同的佈局工具（如砌體）來糾正它。

來源

2016-07-26 00:55:08 Joundill

好的，謝謝你，我已經通過將img高度從自動更改爲156px來解決此問題。 –

在移動視圖中未正確堆疊的圖像bootstrap

回答

相關問題