带有 PHP 循环的 CSS 代码结构第 2 轮

Question

第 2 轮：试图弄清楚为什么我的内容在屏幕尺寸低于 992 像素时看起来不错，但在屏幕尺寸结束时却不行。在较低的屏幕上一切看起来都很好，但在全屏尺寸下几乎没有任何东西在正确的位置。我有一种感觉，这是因为循环内的容器，但我不确定如何正确地将它们取出而不会将所有内容从 .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(); ?>

非常感谢任何见解:)

Answer 1

正如其他人所提到的，您需要使用一些额外的网格类。

为您的 8 | 4 网格要在中型和大型设备上工作，您需要在内容区域使用col-md-8 col-lg-8，在侧边栏使用col-md-4 col-lg-4。

您还需要确保您的博客帖子网格具有col-lg-* 类以及它们的col-md-* 类。

为了让您的布局在移动设备和平板设备上正常工作，您还需要添加一些 col-xs-* 和 col-sm-* 类。

有关Bootstrap网格系统的更多信息，我建议您查看：https://getbootstrap.com/css/#grid

Answer 2

我猜是因为你在使用

<div class="col-lg-8">

但没有以 lg 大小填充剩余的 4 列（并且所有包含的元素都属于 -md 类，因此显示正常）并且也没有清除浮动 - 所以在 lg 大小下，您的元素将彼此相邻浮动并且在大尺寸时不在位置，但在较小尺寸时不会显示为整行。

您需要重新考虑您的布局（或者让它全屏显示）或向父行添加一个 clearfix 类，以确保在添加下一行之前清除浮动。

永远记住 12 是神奇的数字——你不必使用所有的列（并且有 col-lg-8 绝对没问题）但是如果你不填充行，你需要从中清除浮点数—— Bootstrap 在列类中添加了一个 float:left - 因此只在 lg 大小处提供了狡猾的布局。

Answer 3

试试看 col-xs- col-md- col-lg- col-xl-

如果您需要任何其他信息，请查看引导程序“网格系统”

http://getbootstrap.com/css/#grid-options