Question

在移动设备上查看时，保持页面内容居中而不出现太细的最佳方法是什么？这是使用居中的单列布局。

当我在台式机上查看以下内容时，它可以达到所需的外观和间距，但是在移动设备上，内容被限制在一个很小的区域内，并且显得太窄。

<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>

该如何解决？

Answer 1

您正在使用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

Answer 2

尝试按照Zim的建议使用较宽的列。另外，请确保在html页面中有一个视口元标记

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

中心列不会在Bootstrap 4中的Mobile上显得太细

2 个答案: