我的帖子内容(single.php)在手机上溢出,因此页面比手机屏幕宽。
帖子示例:
http://www.migrate666.deniz-tasarim.site/2020/02/23/work-with-a-team/
我曾经为网格系统引导4
仅有一个的包含后视差部分的php代码段:
很抱歉未删除评论行
<div class="container-fluid single-post">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-10 col-lg-10 col-md-10">
<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(); ?>"> -->
<!-- <div class="parallax" style="background-image: url("<?php the_post_thumbnail(); ?>");"></div>-->
<div style="height:100%;">
<!-- <?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 left-toltip">
<?php global $post; ?>
<div class="sticky-top ">
<a class="tooltips" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink($post->ID);?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/facebook.png" alt="Logo" class="logo-img2">
<span>Facebook</span>
</a>
<a class="tooltips" href="https://twitter.com/share?url=<?php echo get_permalink($post->ID);?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/twitter.png" alt="Logo" class="logo-img2">
<span>Twitter</span>
</a>
<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'full\' ); ?>
<a class="tooltips" href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/pinterest.png" alt="Logo" class="logo-img2" >
<span>Pinterest</span>
</a>
<a class="tooltips" href="#see">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/iconfinder_eye-24_103177 (1).png" alt="Logo" class="logo-img2">
<span><?php _e( \'You should see\', \'html5blank\' ); ?></span>
</a>
<a class="tooltips" href="#cost">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/iconfinder_currencysvg_1579795.png" alt="Logo" class="logo-img2">
<span><?php _e( \'Costs\', \'html5blank\' ); ?></span>
</a>
<a class="tooltips" href="#budget">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/iconfinder_58_2529974.png" alt="Logo" class="logo-img2">
<span><?php _e( \'Budget Tips\', \'html5blank\' ); ?></span>
</a>
</div>
</div>
<div class="col-sm-11" >
<?php the_content(); // Dynamic Content ?>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
<?php if ( function_exists( \'wpsabox_author_box\' ) ) echo wpsabox_author_box(); ?>
<?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 col-lg-2 col-sm-2" id="right-sidebar" style="background-color:orange; float: right; right: 0!important; width: 100%;">
<?php get_sidebar(); ?>
</div>
</div>
</div>
SO网友:Tony Djukic
在您的style.css
第580行有以下内容:
.container-fluid.single-post {
width: 1280px;
}
您必须添加媒体查询并在不同的断点处调整此大小,或者尝试将其更改为:
.container-fluid.single-post {
width: 100%;
}
这就解决了大部分问题,但在下面你有一个文本区域
col="45"
这仍然使内容比手机屏幕更宽。所以应该改成
col="40"
或者更好的是,尝试同时删除col属性,而不是在样式中。css添加:
.comments textarea#comment{
width:100%;
}
我想您会经常遇到这个问题,需要将这些特定于像素的宽度调整为百分比,以实现真正流畅的布局。
还有,那只巨大的光标手快把我弄死了。