CSS 代码结构与 PHP 循环第 2 轮


CSS Code Structure with PHP Loops Round 2

第 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('','&laquo; Newer Posts','Older Posts &raquo;'); ?></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