第 2 轮:试图弄清楚为什么我的内容在屏幕尺寸低于 992px 时看起来不错,但在结束时却不行。在较低的屏幕上,一切看起来都很好,但在全屏尺寸下几乎没有任何东西在正确的位置。我有一种感觉,这是因为循环内的容器,但我不确定如何正确地将它们取出,而不会将所有内容从 .col-md-1 容器强制到一个狭窄的列中。
<?php get_header(); ?>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Blog</h1>
<ol class="breadcrumb">
<li><a href="#">Home</a>
</li>
<li class="active">Blog</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="col-md-1 text-center">
<p><?php the_time('l, F jS, Y'); ?></p>
</div>
<?php if ( has_post_thumbnail() ) : ?>
<div class="col-md-5">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive img-hover' ) ); ?>
</a>
</div>
<?php endif; ?>
<div class="col-md-6">
<h3>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<p>by <?php the_author_posts_link(); ?>
</p>
<p><?php the_excerpt(); ?></p>
<a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
</div>
<hr>
<?php endwhile; ?>
<div class="navigation"><p><?php posts_nav_link('','« Newer Posts','Older Posts »'); ?></p></div>
</div>
<?php include 'include.php'; ?>
</div>
<?php else: ?>
<p><?php _e('Sorry, there are no posts.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
任何见解都非常感谢:)
正如其他人所提到的,您需要使用一些额外的网格类。
为您的 8 | 4 网格 要在中型和大型设备上工作,您需要在内容区域使用col-md-8 col-lg-8
,在侧边栏上使用col-md-4 col-lg-4
。
您还需要确保您的博客文章网格在其col-md-*
类旁边具有col-lg-*
类。
为了使布局在移动设备和平板电脑设备上正常工作,您还需要添加一些col-xs-*
类和col-sm-*
类。
有关 Bootstrap 网格系统的更多信息,我建议您查看:https://getbootstrap.com/css/#grid
我的猜测是,这是因为您正在使用
<div class="col-lg-8">
但不以 LG 大小填充剩余的 4 列(并且所有包含的元素都属于 -MD 类,因此显示正常)并且也不会清除浮点数 - 因此在 LG 尺寸下,您的元素将彼此相邻浮动并在大尺寸下错位,但不会在较小的尺寸下显示为整行。
您需要重新考虑布局(并使其全屏显示)或向父行添加 Clearfix 类,以确保在添加下一行之前清除浮点数。
永远记住 12 是神奇的数字 - 你不必使用所有的列(并且拥有 col-lg-8 绝对没问题),但如果你不填充行,你需要从中清除浮点数 - Bootstrapp 在列类中添加了一个 float:left - 因此只在 lg 大小下给出你狡猾的布局。
试一试坤-xs-上校-上校-坤啦-
如果您需要任何其他信息,请参阅引导程序"网格系统"
http://getbootstrap.com/css/#grid-options