Question

我正在使用bootstrap构建WP主题。博客页面有两列，一列用于内容，另一列用于侧边栏。问题是右边的柱子，当有足够的空间时，侧边栏会很快移动到左边的位置。太快我的意思是在屏幕尺寸达到850px之前。即使我让bootstrap.css标准值为width：50％，这种行为也会发生。如何在不改变位置的情况下保持正确的列调整大小？

Div Grid

<div class="blogpage">
  <div class="col-md-6 blogpage-first-columm"><?
$myposts = get_posts(''); foreach($myposts as $post) : setup_postdata($post); ?> <div class="post-item"> <div class="post-info"> <h2 class="post-title"> <a id="post-title" href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?> </a> </h2> <p class="post-meta">Posted by <?php the_author(); ?></p> </div> <div class="post-content"> <?php the_content(); ?> </div> </div><?php endforeach; wp_reset_postdata(); ?></div>
  <div class="col-md-6 blogpage-second-columm"><?php if ( is_active_sidebar( 'custom-side-bar' ) ) : ?>
    <?php dynamic_sidebar( 'custom-side-bar' ); ?>
<?php endif; ?></div>
</div>

CSS

.blogpage {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
.blogpage-second-columm {
   max-width: 355px;
   padding-top: 15px;

}
.blogpage-first-columm {
   width: 70%;

}
.widget-content {
   max-width: 350px;
   margin-left: auto;
}
.widget-title-box {
   border-top-left-radius: 3px;
   border-left: 4px solid #03A8F4;
   border-top-right-radius: 3px;
   border-right: 1px solid #cccccc;
   border-top: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
}
.recent-post-title {
   margin-left: 5px;
   color: #000000;
   padding-top: 5px;
}
.recent-post-title-box {
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  padding-top: 10px;
  padding-bottom: 10px;
}

Answer 1

我花了几个小时才找到答案。而不是使用col-md-6，使用col-xs-6或col-sm-6更好。当两列设置为宽度：50％时，它可以正常工作。我还在测试不同的百分比。

事实上，col-md会使列过早包裹并且不能保持其足够长的宽度。

如何在不改变其位置的情况下保持引导网格的右列重新调整大小？

1 个答案: