我无法在 WordPress 网站中为置顶位置添加边距
Posted
技术标签:
【中文标题】我无法在 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
使用默认框架类来定位任何类/使其成为选择器也是不好的
【讨论】:
以上是关于我无法在 WordPress 网站中为置顶位置添加边距的主要内容,如果未能解决你的问题,请参考以下文章
在我的Wordpress主题的functions.php中添加过滤器的位置?