我无法在 WordPress 网站中为置顶位置添加边距

Posted 2023-03-06

【中文标题】我无法在 WordPress 网站中为置顶位置添加边距

【英文标题】：I can't add margin to position sticky in WordPress site

【发布时间】：2020-05-08 10:09:54

【问题描述】：

我想将包含sticky 的左侧边栏从上移到下，因为它在向下滚动时位于主header 下方。

但是，我无法将margin top 添加到 col-sm-1 下的 sticky-top。

<style>
    .col-sm-1 .sticky-top  margin-top: 50px
</style>

50px 并不重要。长度应该足以将div 移动到标题下方。

页面代码：

<?php get_header(); ?>
<div class="container-fluid">
    <!-- Control the column width, and how they should appear on different devices -->
    <div class="row">
        <div class="col-sm-10" >50%
            <main role="main">
                <!-- section -->
                <section>
                    <?php if (have_posts()): while (have_posts()) : the_post(); ?>
                        <!-- article -->
                        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                            <!-- post thumbnail -->
                            <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
                                <!-- <a href="<?php //the_permalink(); ?>" title="<?php //the_title(); ?>"> -->
                                <?php the_post_thumbnail(); // Fullsize image for the single post ?>
                                </a>
                            <?php endif; ?>
                            <!-- /post thumbnail -->
                            <!-- post title -->
                            <h1>
                                <!--    <a href="<?php //the_permalink(); ?>" title="<?php //the_title(); ?>"><?php //the_title(); ?></a>-->
                            </h1>
                            <!-- /post title -->
                            <div class="row">
                                <div class="col-sm-1 " >50%
                                    <?php global $post; ?>
                                    <style>
                                        .logo-img2
                                        border: 1px solid #d0d0ff;padding:20px; margin-top: 0px; margin-bottom: 0px;
                                        
                                    </style>
                                    <style>
.col-sm-1 .sticky-top  margin-top: 50px
                                    </style>
                                    <div class="sticky-top ">
                                        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink($post->ID);?>">
                                        <div>
                                            <img  src="<?php echo get_template_directory_uri(); ?>/img/icons/facebook.png"  class="logo-img2"">
                                        </div>
                                    </a>
                                    <a href="https://twitter.com/share?url=<?php echo get_permalink($post->ID);?>">
                                        <div>
                                            <img  src="<?php echo get_template_directory_uri(); ?>/img/icons/twitter.png"  class="logo-img2"">
                                        </div>
                                    </a>
                                    <?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
                                    <a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">
                                        <div>
                                            <img  src="<?php echo get_template_directory_uri(); ?>/img/icons/pinterest.png"  class="logo-img2" >
                                        </div>
                                    </a>
                                        <div class=" logo-img2" style="padding: 0px; text-align: center">
                                            <ul class="list-inline">
                                                <li class="list-inline-item">
                                                    <a href="#" data-toggle="tooltip" title="Default tooltip">Tooltip</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-11" >
                            <!-- post details -->
                            <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
                            <span class="author"><?php _e( 'Published by', 'html5blank' ); ?> <?php the_author_posts_link(); ?></span>
                            <span class="comments"><?php if (comments_open( get_the_ID() ) ) comments_popup_link( __( 'Leave your thoughts', 'html5blank' ), __( '1 Comment', 'html5blank' ), __( '% Comments', 'html5blank' )); ?></span>
                            <!-- /post details -->
                            <?php the_content(); // Dynamic Content ?>
                            <?php the_tags( __( 'Tags: ', 'html5blank' ), ', ', '<br>'); // Separated by commas with a line break at the end ?>
                            <p><?php _e( 'Categorised in: ', 'html5blank' ); the_category(', '); // Separated by commas ?></p>
                            <p><?php _e( 'This post was written by ', 'html5blank' ); the_author(); ?></p>
                            <?php edit_post_link(); // Always handy to have Edit Post Links available ?>
                            <?php comments_template(); ?>
                                </div>
                        </article>
                        <!-- /article -->
                    <?php endwhile; ?>
                    <?php else: ?>
                        <!-- article -->
                        <article>
                            <h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
                        </article>
                        <!-- /article -->
                    <?php endif; ?>
                </section>
                <!-- /section -->
            </main>
        </div>
        <div class="col-md-2" style="background-color:orange;height: 100%; width: 100%;">50%
            <?php get_sidebar(); ?>
        </div>
    </div>
</div>
<?php get_footer(); ?>

有一些未删除的行显示为<!--，非常抱歉。

链接：http://www.themeforest-deneme2.deniz-tasarim.site/2020/01/10/yazi-9/

【参考方案1】：

欢迎来到 SO！

因为您有位置 sticky，所以您需要 top 值来移动它，就像在您的案例中设置 top: 60px 而不是 margin

.col-sm-1 .sticky-top 
    /* margin-top: 50px; */
    top: 60px;

静态或相对与绝对或固定的主要区别 是它们在 DOM 流中占用的空间。职位静态 & 相对保持它们在文档流中的自然空间，而 绝对和固定不 - 他们的空间被删除，他们有一个 浮动行为。

Reference for more understanding

使用默认框架类来定位任何类/使其成为选择器也是不好的