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

Posted 2023-03-06

【中文标题】Wordpress 后循环的边框，使用 Bootstrap 的网格

【英文标题】：Border for Wordpress post loop, grid using Bootstrap

【发布时间】：2017-10-03 06:20:51

【问题描述】：

有一个循环，每行 3 个帖子。在每个单独的帖子周围制作边框时遇到问题。取而代之的是，它制作了一个边框，覆盖了顶部柱子，延伸到网格上的底部柱子。见screenshot

我尝试添加一个不同于此处使用的通用选择器的类名，但似乎不起作用。任何意见，将不胜感激。第一个使用 Wordpress 和 Bootstrap 的项目。使用 Sass 进行样式设置，因此使用 div 部分。提前致谢！

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

【参考方案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 类添加到 foreach 内的 <a> 标记中。

【讨论】：

谢谢！我的想法是 col 标签将包括整个帖子，但目光短浅。是的，知道使用 Bootstrap 的类会很糟糕，但是我正在使用 Sass 进行编码，并且会嵌套在 section 标签下，这将避免其他页面/部分上的冲突。我的最终解决方案发布在下面。

【参考方案2】：

感谢 s0rfi949 的回复，我将边框应用于错误的 div。相反，将帖子包装在 a 标签之外的新 div 中，因为这并没有覆盖整个帖子。

如原帖中所述，我使用的是 Sass，因此该类将嵌套在部分下。 （忘记在原始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>