Содержимое страницы не отображается на всю ширину в мобильном представлении с атрибутом RTL

ProgramBox

Содержимое страницы не отображается на всю ширину в мобильном представлении с атрибутом RTL

Post author:admin
Запись опубликована:20 февраля, 2023
Post category:Вопросы по программированию

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

У меня есть блог, и я сделал многоязычный с использованием атрибута RTL, когда пользователь переключается на другой язык, содержимое страницы устанавливается с LTR на RTL.

На одной из страниц у меня есть переключатель с содержимым, пока все в порядке, но когда я переключаюсь на мобильный просмотр, переключатель и его содержимое отображаются не во всю ширину, что показывает плохой макет, как показано ниже:

здесь проблема

и вот как это должно выглядеть:

должно быть так

и это HTML-код:

     <div class="row d-flex">

        <div class='col pl-md-5 py-md-5 '>

            <div class='row justify-content-start pt-3 pb-3 '>

                <div class='col heading-section ftco-animate '>
                    <h2><?php echo $lang['get-in-touch']; ?></h2>
                    <h2 class='mb-4'></h2>

                    <div class='tabulation-2 mt-4 '>
                        <ul class='nav nav-pills nav-fill d-md-flex d-block'>
                            <li class='nav-item'>
                                <a class='nav-link active py-2' data-toggle='tab'
                                    href='#home4'><?php echo $lang['contact us']; ?></a>
                            </li>
                            <li class='nav-item'>
                                <a class='nav-link py-2 mb-md-0 mb-2' data-toggle='tab'
                                    href='#home2'><?php echo $lang['register']; ?></a>
                            </li>

                        </ul>
                        <div class='tab-content bg-light rounded mt-2'>

                            <div class='tab-pane container p-0 fade' id='home4'>

                                <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method='POST'>
                                    <h5 class="card-title"><?php echo $lang['contact us desc']; ?></h5>
                                   
                                    <div class='form-group'>
                                        <input type='text' name='name' class='form-control'
                                            placeholder='<?php echo $lang['name'];?>'>
                                    </div>
                                    <div class='form-group'>
                                        <input type='text' name='email' class='form-control'
                                            placeholder='<?php echo $lang['email'];?>'>
                                    </div>
                                    <div class='form-group'>
                                        <input type='text' name='phone' class='form-control'
                                            placeholder='<?php echo $lang['phone'];?>'>
                                    </div>
                                    <div class='form-group'>
                                        <input type='text' name='subject' class='form-control'
                                            placeholder='<?php echo $lang['title'];?>'>
                                    </div>
                                    <div class='form-group'>
                                        <textarea name='message' id='' cols='30' rows='7' class='form-control'
                                            placeholder='<?php echo $lang['message'];?>'></textarea>
                                    </div>
                                   
                                   
                                        <div class="parentElement">
                                            <input type='submit' name='submit-message'
                                                value='<?php echo $lang['send-m'];?>' class='btn btn-primary btns'>
                                        </div>
                                    </div>

                                </form>
                            </div>
                            <div class='tab-pane container p-0 fade' id='home2'>
                                <p> </p>
                                <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method='POST'
                                    class='bg-light p-4 p-md-5 contact-form'>
                                    <h5 class="card-title"><?php echo $lang['register desc']; ?></h5>
                                    <br>
                                    

                                </form>
                            </div>



                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

и это код css:

 [lang="ar"], [lang="ar"] * {
    direction: rtl;
    text-align: right !important;
    width: 100%;
    font-family: "Changa", sans-serif;
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;

}
.row {
 
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col {
  
    flex-basis: 0;
    -webkit-box-flex: 1;
    flex-grow: 1;
    max-width: 100%;
}
.justify-content-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
}
.pb-3, .py-3 {
    padding-bottom: 1rem !important;
}
.pt-3, .py-3 {
    padding-top: 1rem !important;
}
.ftco-animate {
    opacity: 1;
    visibility: visible;
}
.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

Я надеюсь, что кто-нибудь сможет мне помочь.

Ответ №1:

На самом деле нет никаких проблем с опубликованным вами кодом. Я просто обернул <div class="row d-flex"> div с помощью a container и обернул контейнер родительским элементом, и это сработало хорошо. Я не смог воспроизвести вашу проблему.

Не могли бы вы предоставить больше CSS, возможно, с этим проблема?

Обратите внимание, что я протестировал ваш код с dir="rtl" помощью applied to the <HTML> tag и загрузил загрузчик RTL с официального сайта. И это не показало мне никаких проблем.

Я также обратился dir="rtl" к parent классу и не смог увидеть вашу проблему, для меня она работала отлично.

Итак, в заключение я думаю, что есть что-то еще, вызывающее это переполнение, возможно, в другом разделе.

Вот отличная статья из CSS-ХИТРОСТИ о том, как найти переполнение тела. Поиск / исправление непреднамеренного переполнения тела

Обновить

Я добавил ваш CSS и протестировал его, и да, для меня не было ничего плохого.

 <div class="holder">
  <div class="container">
    <div class="row d-flex">

      <div class='col pl-md-5 py-md-5 '>

        <div class='row justify-content-start pt-3 pb-3 '>

          <div class='col heading-section ftco-animate '>
            <h2>
              <?php echo $lang['get-in-touch']; ?>
            </h2>
            <h2 class='mb-4'></h2>

            <div class='tabulation-2 mt-4 '>
              <ul class='nav nav-pills nav-fill d-md-flex d-block'>
                <li class='nav-item'>
                  <a class='nav-link active py-2' data-toggle='tab' href='#home4'>
                    <?php echo $lang['contact us']; ?>
                  </a>
                </li>
                <li class='nav-item'>
                  <a class='nav-link py-2 mb-md-0 mb-2' data-toggle='tab' href='#home2'>
                    <?php echo $lang['register']; ?>
                  </a>
                </li>

              </ul>
              <div class='tab-content bg-light rounded mt-2'>

                <div class='tab-pane container p-0 fade' id='home4'>

                  <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method='POST'>
                    <h5 class="card-title">
                      <?php echo $lang['contact us desc']; ?>
                    </h5>

                    <div class='form-group'>
                      <input type='text' name='name' class='form-control' placeholder='<?php echo $lang[' name '];?>'>
                    </div>
                    <div class='form-group'>
                      <input type='text' name='email' class='form-control' placeholder='<?php echo $lang[' email '];?>'>
                    </div>
                    <div class='form-group'>
                      <input type='text' name='phone' class='form-control' placeholder='<?php echo $lang[' phone '];?>'>
                    </div>
                    <div class='form-group'>
                      <input type='text' name='subject' class='form-control' placeholder='<?php echo $lang[' title '];?>'>
                    </div>
                    <div class='form-group'>
                      <textarea name='message' id='' cols='30' rows='7' class='form-control' placeholder='<?php echo $lang[' message '];?>'></textarea>
                    </div>


                    <div class="parentElement">
                      <input type='submit' name='submit-message' value='<?php echo $lang[' send-m '];?>' class='btn btn-primary btns'>
                    </div>
                </div>

                </form>
              </div>
              <div class='tab-pane container p-0 fade' id='home2'>
                <p> </p>
                <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method='POST' class='bg-light p-4 p-md-5 contact-form'>
                  <h5 class="card-title">
                    <?php echo $lang['register desc']; ?>
                  </h5>
                  <br>


                </form>
              </div>



            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

обновление 2

Эй, я проверил это, и проблема вызвана js-fullheight библиотекой. img По какой-то причине это приводит к боковой прокрутке. Кроме того, вам следует рассмотреть возможность использования rtl-bootstrap для устранения проблем с полями и заполнением, вызванных dir="rtl

после этого вы должны быть готовы к работе. Вот результат после удаления js-fullheight библиотеки и margin-right (здесь вы должны использовать bootstrap-rtl ), поскольку он сделает это автоматически для вас.

1. спасибо за ответ. Я следовал вашим инструкциям, но у меня все еще не работает. вы можете проверить веб-сайт, который может помочь вам лучше определить мою проблему: tiyacademy.com , перейдите на страницу «Связаться с нами» и отобразите ее в режиме мобильного просмотра. заранее спасибо.

2. Эй, я проверил это, и проблема вызвана js-fullheight библиотекой. img По какой-то причине это приводит к боковой прокрутке.