Question

第二轮：试图弄清楚为什么我的内容在屏幕尺寸低于992px时看起来很好但在结束时却没有。在屏幕下方看起来一切都很好，但在全屏尺寸下几乎没有任何东西在正确的位置。我有一种感觉，因为环内的容器，但我不确定如何在没有它的情况下将它们从.col-md-1容器中强制插入一个狭窄的列中。 / p>

<?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

我猜是因为你正在使用

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

但是没有填充lg大小的剩余4列（并且所有包含的元素都是-md类，所以显示正常）并且也没有清除浮点数 - 所以在lg大小时你的元素将相互浮动并且在大尺寸的位置，但不是在较小的尺寸，它们将显示为完整的行。

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

永远记住12是神奇的数字 - 你不必使用所有的列（并且col-lg-8绝对没问题）但是如果你没有填满这行，你需要清除它的浮动 - Bootstrapp添加了一个浮点数：左边是列类 - 因此只能以lg大小给出你的狡猾布局。

Answer 2

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

为你的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 3

试试吧 COL-XS- COL-MD- COL-LG- COL-XL -

如果您需要任何其他信息，请参阅bootstrap＆＃34;网格系统＆＃34;

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

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

3 个答案: