ریسپانسیو کردن قسمت comment

حل شده 

PHP

توسط sirnamdari در 2 سال پیش
2 33.6k 8 2 سال پیش
sirnamdari kingblogg
0

قول میدم این آخرین مشکل در زمینه ریسپانسیو باشه! :)
قسمت کامنت هارو نمیدونم چطوری ریسپانسیو کنم، form , input . اینم کداش

<div id="comments">
<h3><?php comments_number('بدون دیدگاه' , 'یک دیدگاه' , '% دیدگاه');?></h3>
<?php if ( have_comments) :?>
    <ol class="commentslist">
        <?php wp_list_comments('avatar_size=64&type=comment');?>
    </ol>
<div id="respond">
    <form action="<?php echo get_option('siteurl');?>/wp-comments-post.php" method="post" id="commentform">
        <?php if ($user_ID) :?>
        <?php print 'وارد شده با نام : ' ;?>
        <a href="<?php echo get_option('siteurl');?>/wp-admin/profile.php">
            <?php echo $user_identity ;?>
        </a> / 
            <a href="<?php echo wp_logout_url(get_permalink());?>"><?php print 'بیرون رفتن';?> &raquo;</a>
        <?php else:?>
            <input type="text" name="author" id="author" value="<?php echo $comment_author;?>"
                   placeholder="نام..." onclick="this.placeholder='';" size="22" tabindex="1">
            <input type="text" name="email" id="email" value="<?php echo $comment_author_email;?>"
                   placeholder="ایمیل..." onclick="this.placeholder='';" size="22" tabindex="2">
            <input type="text" name="url" id="url" value="<?php echo $comment_author_url;?>"
                   placeholder="آدرس سایت..." onclick="this.placeholder='';" size="22" tabindex="3">
            <br>
            <textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea>
        <br>
            <input type="submit" name="submit" id="submit" value="ارسال دیدگاه" tabindex="5">
        <?php comment_id_fields();?>
        <?php do_action('comment_for' , $post->ID );?>
    </form>
    <?php endif;?>
</div>
<?php endif;?>
</div>

پاسخ ها

0

ببین بستگی به نوع صفحه هم داره اگر درست طبق بوت استرپ فرم رو بهش کلاس form-group و form-control داده باشی خودش عرض همه ی input داخل فرم رو %100 میکنه. یعنی ریسپانسیو میشه. بعد تو صفحه های بزرگتر واسه اینکه عرض فرم زیاد نباشه با کلاس col-* میتونی عرض کل فرمتو کم کنی یا دو ستونه کنی. امیدوارم منظورمو رسونده باشم

0

اینم کدهای css

#comments {
    float: right;
    background-color: #fff;
    margin: 15px 14px 50px 0;
}
#comments h3{
    border-bottom: 2px solid #f5f5f5;
    color: #515151;
    padding: 0 15px 15px 0;
}
#comments p {
    width: 450px;
}
ol.commentslist {
    margin: 5px 0;
    list-style: none;
    display: block;
    clear: both;
    padding: 5px 10px;
}
ol.commentslist img{
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    margin: 2px;
}
ol.commentslist a{
    color: #10c9c3;
}
ol.commentslist li{
    padding: 5px;
    margin: 7px 0;
    overflow: hidden;
    border-bottom: 2px solid #f5f5f5;
}
#respond {
    margin: 5px 0 15px;
    width: 850px;
    clear: both;
    display: block;
}
form#commentform {
    width: 850px;
    padding: 10px 5px;
    margin: 5px 0;
    overflow: hidden;
}
#commentform input {
    width: 190px;
    height: 40px;
    display: block;
    float: right;
    border: 2px solid #f5f5f5;
    margin-right: 15px;
    font-family: 'IRANSansWeb Light', sans-serif;
    padding-right: 7px;
}
#commentform textarea {
    width: 599px;
    margin: 10px 15px;
    padding: 5px 15px;
    border: 2px solid #f5f5f5;
}
#commentform #submit {
    width: 150px!important;
    color: #fff;
    background-color: #10c9c3;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
0

اینجا رو درست کردن واسه همین بحث برنامه نویسی دیگه. 100 تا دیگه سوال درمورد ریسپانیو بپرس (فقط دیگه معلوم نیست من جواب بدم یا نه )

مگه بوت استرپ خودش نداره؟

0

فدات، یه سری سطر و ستون داره row و col-lg و امثال اینا ولی داخل اینا هم گذاشتم ریسپانسیو نشد
فکر کنم فیلد و فرم و اینپوت قضیه ش فرق داره، تنها چیزی که الان نمیتونم ریسپانسیو کنم و خیلی هم سرچ زدم گوگل و نتیجه نداد همین بخش کامنت سایته

0

باید از کلاس های ریسپانسیو بوت استرپ استفاده کنی. مثلا col-md-6 وقتی عرض صفحه به یه جایی رسید میشه ٪50 یعنی نصف میشه.

اینو بخون همه چی دستت میاد: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

0

اتفاقا استفاده کردم از این کلاس هاش، حالا اینم که دادی میخونم ببینم چطور میشه، ممنون

0

عالی بود، این کدای فایل comments.php رو خودم دستی نوشتم و از کلاسای فرم بوت استرپ استفاده نکردم. الان که گفتی متوجه ایراد کار شدم. ممنون

1

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.