Bootstrap4 HTML 页面在移动设备上太大答案

【问题标题】：Bootstrap4 HTML page is too big on mobileBootstrap4 HTML 页面在移动设备上太大
【发布时间】：2021-02-15 22:24:43
【问题描述】：

我是引导程序和 css 的相对菜鸟。在过去的几周里，我已经从头开始重建了这个网站几次，以尝试对间距等进行排序，目前我遇到的问题是主要部分对于 x 维度的移动屏幕来说有点太大并且可以被滚动，这显然是不受欢迎的行为。我已经尝试了很多配置，并且对这个明显的右边距来自哪里感到困惑。（内容会填满屏幕，直到您滚动留下大量背景主体颜色。）我尝试通过设置不同元素的背景颜色进行调试，并且边距在主体背景中显示为黑色，但在主体背景中显示为白色，即介于两者之间身体和主要。我已经尝试在我的 css 中这样做：

html {
  overflow-y: scroll;
  overflow-x: hidden;   // this solves the problem on a small browser window but not on mobile device.
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

main {
  margin: 0;
  padding: 0;
  background-color: #000; // this is what i was referring to that leaves a white margin after scrolling if this color is in the body, the margin is black.
}

main > .container {
  padding-top: 54px;
}

在我的 html 中我有这个：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

以及所有其他必需的引导程序和 js。

我使用的是 django 框架，所以 html 是 django 模板的形式，而基本模板的主要内容是导航栏：

<body>
  <header class="site-header">
    <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
      <div class="container">
    <!-- # Navbar stuff-->
      </div>
    </nav>
  </header>
  <main role="main" class="container">
    <div class="row justify-content-center">
      <div class="col col-md-10">
        {% if messages %}
          {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">
              {{ message }}
            </div>
          {% endfor %}
        {% endif %}
      </div>
    </div>

    {% block content %}{% endblock content %}
  </main>
  <!-- scripts-->
</body>

然后平均内部模板是这样开始的：

<div class="container">
  <div class="row justify-content-center">
    <div class="col col-md-8">

但正如我之前所说的颜色问题似乎并没有超出基本模板。我被难住了，这个接近于完全重建，但我想我会先在这里尝试！

【问题讨论】：

标签： html css django bootstrap-4

【解决方案1】：

这个问题虽然在一个实例中由另一个答案解决，但实际上源于我删除了我在每个页面上使用的 .container 类上的填充。使用默认引导容器解决了这个问题。正如我所想，cols 实际上默认为 sm 设置。

【讨论】：

【解决方案2】：

你应该使用col-sm-[1 - 12]

【讨论】：

你的传奇！谢谢你。你是对的，在内部模板中使用它是有效的。我在之前的迭代中确实有过，但开始相信 sm 设置是默认设置并停止使用它们......错误！谢谢！令人费解的日子！