使用PHP循环的CSS代码结构第2轮 [英] CSS Code Structure with PHP Loops Round 2

问题描述

第2轮：尝试弄清楚为什么屏幕尺寸小于992像素时，我的内容看起来很漂亮，但是当屏幕尺寸不足时。一切看起来在下面的屏幕，但几乎没有什么是在正确的地方在全屏幕尺寸。我有一种感觉是因为在循环中的容器，但我不知道如何正确地把它们带出来，而不是强制一切从.col-md-1容器的一个窄列。

 <？php get_header（）; ？> 
< div class =row> 
< div class =col-lg-12> 
< h1 class =page-header>博客< / h1> 
< ol class =breadcrumb> 
< li>< a href =＃>首页< / a> 
< / li> 
< li class =active>博客< / 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>由<？php the_author_posts_link（）; ？> 
< / p> 
< p><？php the_excerpt（）; ？>< / p> 
< a class =btn btn-primaryhref =<？php the_permalink（）;？>>阅读更多< 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（'对不起，没有帖子。 ？>< / p> 
<？php endif; ？> 
<？php get_footer（）; ？>非常感谢任何洞察力：）
 
 >解决方案
正如其他人提到的，您需要使用一些额外的网格类。
 
 
 
 4网格在中型和大型设备上工作，您需要在您的内容区域和 col上使用 col-md-8 col-lg-8  
 
 
 
您还需要确保您的博客帖子网格具有 
 code> col-md  -  * 类别的code> col-lg  -  * 类。 
 
 
为了让您的布局在移动设备和平板电脑上正常工作，您还需要添加一些 col-xs  -  * 和 col -sm  -  * 类。
 
 
 
有关Bootstrap网格系统的更多信息，我建议您查看： https://getbootstrap.com/css/#grid  
 
Round 2: Trying to figure out why my content looks fine when screen size is under 992px but not when it is over. Everything looks fine in the lower screens but hardly anything is in the right place in full screen size. I have a feeling it's because of the containers inside the loop, but I'm not sure how to properly take them out without it forcing everything into a narrow column from the .col-md-1 container.
<?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(); ?>
Any insight is greatly appreciated :)
解决方案
As has been mentioned by others, you need to use some additional grid classes.

For your 8 |  4 grid to work on medium and large devices, you would need to use col-md-8  col-lg-8 on your content area and col-md-4  col-lg-4 on your sidebar.

You'll also want to make sure that your blog posts grids have col-lg-* classes alongside their col-md-* classes.

For your layout to work properly on mobile and tablet devices you'll also want to add some col-xs-* and col-sm-* classes.

For more information on the Bootstrap grid system, I would recommend you view: https://getbootstrap.com/css/#grid

                        
这篇关于使用PHP循环的CSS代码结构第2轮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！