css - Wordpress 后循环的边框，使用 Bootstrap 的网格

Question

有一个循环，每行 3 个帖子。无法在每个单独的帖子周围制作边框。相反，它正在制作一个边框，覆盖延伸到网格上底部帖子的顶部帖子。参见 screenshot

我尝试添加不同于此处使用的通用选择器的类名，但似乎没有用。任何意见，将不胜感激。第一个使用 Wordpress 和 Bootstrap 的元素。使用 Sass 进行样式设计，因此使用了 divs 部分。提前致谢!

.col-sm-4 {
        border: 1px solid gray;
    }

<section id="blog-section">
    <div class="container">   
        <div class="col-sm-12">
            <h1>Blog Title</h1>
        </div>
        <div class="row">
        </div>
    </div>


    <div class="container">    
        <div class="row">
            <div class="col-sm-4 text-center">
                <?php $i = 1 ?>
                <?php $posts = get_posts(array(
    'post_type' => 'post',
    'posts_per_page' => -1
));
                foreach ($posts as $post) : start_wp(); ?>
                <?php if ($i == 1): ?>

                <a class="perm_link" href="<?php the_permalink(); ?>">
                    <h2><?php the_title(); ?></h2>
                    <div class="blog-image image-responsive"><?php the_post_thumbnail('thumbnail'); ?></div></a>
                <p><?php the_excerpt(); ?></p>
                <span class="shortlink">
                    <?php the_shortlink("Read More"); ?>
                </span>
                <?php endif; ?>
                <?php if($i == 3){$i = 1;} else {$i++;} ?>
                <?php endforeach; ?>
            </div>

<div class="col-sm-4 text-center">
                <?php $i = 1 ?>
                <?php $posts = get_posts(array(
    'post_type' => 'post',
    'posts_per_page' => -1
));
                foreach ($posts as $post) : start_wp(); ?>
                <?php if ($i == 2): ?>
                <h2><?php the_title(); ?></h2>
                <div class="blog-image image-responsive"><?php the_post_thumbnail('thumbnail'); ?></div>
                <p><?php the_excerpt(); ?></p>
                <span class="shortlink">
                    <?php the_shortlink("Read More"); ?>
                </span>
                <?php endif; ?>
                <?php if($i == 3){$i = 1;} else {$i++;} ?>
                <?php endforeach; ?>
            </div>

            <div class="col-sm-4 text-center">
                <?php $i = 1 ?>
                <?php $posts = get_posts(array(
    'post_type' => 'post',
    'posts_per_page' => -1
));
                foreach ($posts as $post) : start_wp(); ?>
                <?php if ($i == 3): ?>
                <h2><?php the_title(); ?></h2>
                <div class="blog-image image-responsive"><?php the_post_thumbnail('thumbnail'); ?></div>
                <p><?php the_excerpt(); ?></p>
                <span class="shortlink">
                    <?php the_shortlink("Read More"); ?>
                </span>
                <?php endif; ?>
                <?php if($i == 3){$i = 1;} else {$i++;} ?>
                <?php endforeach; ?>
            </div>
        </div>    
    </div>
</section>

Answer 1

修改 Bootstrap 的 CSS 通常是禁忌。任何时候你重复使用那个 .col-sm-4在您网站的任何位置，您都会看到 border: 1px solid gray;出现。首先，您需要创建一个类:<div class="custom-border">或类似的东西，然后在您的自定义 css 文件中写下这样的东西:

.custom-border { border: 1px solid grey; } 

这样您就不会踩到 bootstrap 的列(以及您网站的许多其他部分)。

此外，如果您想编写包含每个单独帖子的 CSS，您将需要在该特定 foreach 中应用您的自定义类。循环。

.col-sm-4只是简单地声明列，它是 4 横跨，并且在网格中从上到下跨越。因此你的问题。所以你想要这样的东西:

<div class="container">    
        <div class="row">
            <div class="col-sm-4 text-center">
                <?php $i = 1 ?>
                <?php $posts = get_posts(array(
    'post_type' => 'post',
    'posts_per_page' => -1
));
                foreach ($posts as $post) : start_wp(); ?>
                <?php if ($i == 1): ?>

                <a class="custom-border perm_link" href="<?php the_permalink(); ?>">
                    <h2><?php the_title(); ?></h2>
                    <div class="blog-image image-responsive"><?php the_post_thumbnail('thumbnail'); ?></div>
                </a>
                <p><?php the_excerpt(); ?></p>
                <span class="shortlink">
                    <?php the_shortlink("Read More"); ?>
                </span>
                <?php endif; ?>
                <?php if($i == 3){$i = 1;} else {$i++;} ?>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>

我在这里添加了 custom-border类到 <a> foreach 内的标签.