Центральная колонка не выглядит слишком тонкой на мобильном телефоне в Bootstrap 4 - PullRequest
Новая
       6

Центральная колонка не выглядит слишком тонкой на мобильном телефоне в Bootstrap 4

0 голосов
/ 30 января 2019

Каков наилучший способ сохранить центрирование содержимого страницы, не выглядя слишком тонким при просмотре на мобильном устройстве?При этом используется центрированный макет с одним столбцом.

Когда я смотрю следующее на рабочем столе, он достигает желаемого вида и расстояния, но на мобильных устройствах контент ограничен слишком маленькой областью и выглядит слишком узким.

<section id="copybox" class="pl-sm-1 pl-md-5 pr-sm-1 pr-md-5">
    <div class="row justify-content-center">
        <div class="col-7">
            (Area consisting of multiple div's, paragraphs etc)
        </div>
    </div>
</section>

Что можно сделать, чтобы решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Попробуйте использовать более широкие столбцы, как Zim .Кроме того, убедитесь, что в HTML-странице есть метатег viewport 

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
0 голосов
/ 30 января 2019

Вы используете col-7, который всегда будет занимать 58,333% ширины его родителя.Используйте более широкий столбец (например: col-10, col-11, col-12 и т. Д.) На мобильном телефоне. 

<section id="copybox" class="pl-sm-1 pl-md-5 pr-sm-1 pr-md-5">
    <div class="row justify-content-center">
        <div class="col-sm-7 col-10 border">
            (Area consisting of multiple div's, paragraphs etc)
        </div>
    </div>
</section>

Демо-версия: https://www.codeply.com/go/ueIUlH19DB

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...