我的手机上的帖子内容溢出

时间:2020-03-15 作者:ahmet kaya

我的帖子内容(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>

1 个回复
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%;
}
我想您会经常遇到这个问题,需要将这些特定于像素的宽度调整为百分比,以实现真正流畅的布局。

还有,那只巨大的光标手快把我弄死了。