WordPress后循环的边框，使用引导程序的网格

Question

循环播放每行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>

Answer 1

修改引导的CSS通常是一个没有没有。只要你在你的网站的任何地方重复使用.col-sm-4，你就会看到border: 1px solid gray;显示出来。首先，你需要创建像类：在您的自定义CSS文件<div class="custom-border">或诸如此类的东西，然后写这样的事：

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

这样，你不上引导的列步进（和你网站的其他部分也是如此）。

另外，如果你想编写包装每个单独帖子的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>标签。

Answer 2

感谢s0rfi949的响应，我将border应用于错误的div。相反，在一个标签之外的新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>