html - 如何在 Wordpress 边栏中拆分小部件？

Question

我想让放置在我的 Wordpress 侧边栏中的每个小部件都以额外的间距分开，就像在这个 demo site 中一样。 .这是我的电流sidebar .任何提示如何做到这一点？我尝试了在网上找到的所有 CSS 代码，但没有一个对我有帮助。这是该侧边栏的 PHP。

<?php
/*
Template name: Page - Right sidebar
*/
 get_header(); ?>

    <?php do_action( 'flatsome_before_page' ); ?>

   <div class="page-wrapper page-right-sidebar">
   <div class="row">

  <div id="content" class="large-9 left col col-divided" role="main">
  <div class="page-inner">
    <?php if(get_theme_mod('default_title', 0)){ ?>
        <header class="entry-header">
            <h1 class="entry-title mb uppercase"><?php the_title(); ?></h1>
        </header><!-- .entry-header -->
    <?php } ?>
    <?php while ( have_posts() ) : the_post(); ?>

        <?php the_content(); ?>

        <?php if ( comments_open() || '0' != get_comments_number() ){
                    comments_template(); } ?>

    <?php endwhile; // end of the loop. ?>
    </div><!-- .page-inner -->
 </div><!-- .#content large-9 left -->

<div class="large-3 col">
<?php get_sidebar(); ?>
</div><!-- .sidebar -->

</div><!-- .row -->
</div><!-- .page-right-sidebar container -->
<?php do_action( 'flatsome_after_page' ); ?>
<?php get_footer(); ?>

Answer 1

#sidebar li.widget-container{
    margin-bottom:20px;
}

小部件的背景颜色:

#sidebar_container{
    background:transparent;
}

sidebar_container 是您的边栏容器。

示例:

<aside id='sidebar_container' class='col-md-4 right'>
    <ul id='sidebar' class='right'>
        <?php
            if ( is_single() || is_page() ){
                if ( is_active_sidebar('Single Sidebar') ){
                    dynamic_sidebar(esc_html__('Single Sidebar','my-theme')); 
                }
            }else{
                if ( is_active_sidebar('First sidebar') ){
                    dynamic_sidebar(esc_html__('First sidebar','my-theme'));    
                }
            }
        ?>
    </ul>
</aside>

填充和边距变化:

.col-border+.col,.col-divided+.col {
    padding-left: 10px!important;
    background: #fff;
    margin-top:-15px;
    /* margin-left:-100px; */
    display: inline-table;
    /* padding-right: 60px; */
}