我正在使用带有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">×</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; }`
答案 0 :(得分:0)
我猜它是因为你的个人资料是不同的高度。在我看来,配置文件1比配置文件2更高,由于浮动工作的方式,这使得引导网格有点混乱。
您可以通过确保配置文件的高度相同,或者使用不同的布局工具(如砌体)来纠正它。