我的代码似乎比手机屏幕宽。我不了解原因。它是由bootstrap 4和自己的样式构建的，希望您能解决。
正如您在链接上看到的那样，作者信息卡溢出了，而且主移动屏幕也比卡片宽。
编辑：我删除了代码中的空格。
https://www.sac-ekimi.deniz-tasarim.site/2019/07/06/kadinlarda-sac-ekimi/
编辑：我从样式中删除了固定的witdh。现在作者卡似乎很正常，但是注释溢出。我添加了以下几行来控制其大小，但是代码不起作用：
<div class="container">
<div class="row">
<div class="col-xs-3">
<?php comments_template(); ?>
</div>
<div class="col-xs-9"></div></div></div>
所有single.php：
<?php get_header(); ?>
<?php wpb_set_post_views(get_the_ID()); ?>
<main role="main">
<section class="container">
<div class="row " >
<div class="col-lg-10 ">
<div class="row">
<div class="col-lg-12 ">
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article id="post-<?php the_ID(); ?> <?php post_class();"" ?>
<!-- post thumbnail -->
<!-- /post thumbnail -->
<?php the_content(); // Dynamic Content
?>
</div>
<!-- /post title -->
<?php the_tags( __( 'Tags: ', 'html5blank' ), ', ', '<br>'); // Separated by commas with a line break at the end ?>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
<!-- profile card -->
<style>
@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400";
.badgescard,
.firstinfo {
display: flex;
justify-content: center;
align-items: center;
}
html {
height: 100%;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.contentz {
position: relative;
animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}
.card {
width: %80;
min-height: 100px;
padding: 20px;
border-radius: 3px;
background-color: white;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.card:after {
content: '';
display: block;
width: %80;
height: 300px;
background: cadetblue;
position: absolute;
animation: rotatemagic 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105) 1s both;
}
.badgescard {
padding: 10px 20px;
border-radius: 3px;
background-color: #00bcd4;
color:#fff;
width: %80;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
margin-left: 10px;
z-index: -1;
left: 10px;
bottom: 10px;
animation: animainfos 0.5s cubic-bezier(0.425, 1.04, 0.47, 1.105) 0.75s forwards;
}
.badgescard span {
font-size: 1.6em;
margin: 0px 6px;
opacity: 0.6;
}
.firstinfo {
flex-direction: row;
z-index: 2;
position: relative;
}
.firstinfo img {
border-radius: 50%;
width: 120px;
height: 120px;
}
.firstinfo .profileinfo {
padding: 0px 20px;
}
.firstinfo .profileinfo h1 {
font-size: 1.8em;
}
.firstinfo .profileinfo h3 {
font-size: 1.2em;
color: #00bcd4;
font-style: italic;
}
.firstinfo .profileinfo p.bio {
padding: 10px 0px;
color: #5A5A5A;
line-height: 1.2;
font-style: initial;
}
@keyframes animatop {
0% {
opacity: 0;
bottom: -500px;
}
100% {
opacity: 1;
bottom: 0px;
}
}
@keyframes animainfos {
0% {
bottom: 10px;
}
100% {
bottom: -42px;
}
}
@keyframes rotatemagic {
0% {
opacity: 0;
transform: rotate(0deg);
top: -24px;
left: -253px;
}
100% {
transform: rotate(-30deg);
top: -24px;
left: -78px;
}
}
</style>
<?php if ( function_exists('journalite_author_bio') ) {journalite_author_bio();}?>
<!-- /profile card -->
<?php comments_template(); ?>
</article>
<!-- /article -->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
</article>
<!-- /article -->
<?php endif; ?>
</div>
</div>
<div class="col-lg-2" >
<nav class="navbar navbar-expand-md navbar-light position-fixed shadow p-3 mb-5 bg-white rounded " style="background-color:#F3F3F3; overflow: hidden; margin-top:50px;" role="navigation">
<?php get_sidebar(); ?>
<?php dynamic_sidebar('smartslider_area_1'); ?>
</nav>
</div>
</div>
</div>
</section>
</main>
<?php get_footer(); ?>