Question

循环播放每行3个帖子。无法在每个帖子周围环绕边框。相反，它制作了一个覆盖顶部柱子的边框，延伸到网格上的底部柱子。见screenshot

我尝试添加除此处使用的通用选择器之外的其他类名，但似乎没有效果。任何意见，将不胜感激。使用带有Bootstrap的Wordpress的第一个项目。使用Sass进行样式设置，因此部分为div。提前谢谢！

＆＃13;

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

＆＃13;

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

＆＃13;

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标记。

Answer 2

感谢s0rfi949的回复，我将边框应用于错误的div。相反，在一个标签之外的新div中包裹帖子，因为这不包括整个帖子。

正如原帖中提到的，我正在使用Sass，因此该类将嵌套在section下。（忘了注意原来的css例子）

#blog-section{
 .custom-border {
        border: 2px solid black;
    }
}

    <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): ?>

                <div class="custom-border">
                    <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>
                </div>
                <?php endif; ?>
                <?php if($i == 3){$i = 1;} else {$i++;} ?>
                <?php endforeach; ?>
            </div>

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

2 个答案: