当我调整行大小时，我的 Bootstrap 行超出了页面宽度？

Question

我是 Bootstrap 的新手，一直在学习一些教程。我目前正在尝试重建 Google 的主页，但运行在网格系统的响应能力方面遇到了一些困难。

我在 Google 的主页上创建了一个非常基本的顶部栏布局，它或多或少看起来不错，因为它是全屏的；但是，当我调整 window 的大小时，右侧的文本超出了 window.

的宽度

    <body>
      <div class="container-fluid" id="topbar">
        <div class="row">
          <div class="col-1 justify-content-start aboutlink">
            About
          </div>
          <div class="col-1 justify-content-start">
            Store
          </div>
          <div class="col-8">
          </div>
          <div class="col-1 justify-content-end gmaillink">
            Gmail
          </div>
          <div class="col-1 justify-content-end">
            Images
          </div>
        </div>
      </div>

这是问题的图片：

类“aboutlink”和“gmaillink”只是将文本右对齐，顶部栏 id 有 15px 的边距并设置字体大小。

我通读了响应式断点和网格系统文档，但似乎无法解决此问题。如果有人可以分享一些建议，将不胜感激？

谢谢。

Answer 1

怎么了？

如果我们为列添加边框并允许单词在不适合时换行，我们可以更好地了解发生了什么。

看看这个例子，您会发现在较小的屏幕上，文字不适合 col-1 div，并且由于默认情况下文字不换行，这导致 col 变大大于应容纳文本大小的大小：

.col-1 {
  overflow-wrap: break-word; border: 1px solid lightgray;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
  <div class="row">
    <div class="col-1 aboutlink">
      About
    </div>
    <div class="col-1">
      Store
    </div>
    <div class="col-8">
    </div>
    <div class="col-1 gmaillink">
      Gmail
    </div>
    <div class="col-1">
      Images
    </div>
  </div>
</div>

1.断点和填充 classes

Bootstrap's grid classes 允许您为列设置断点。因此，例如这些 classes 的意思是：在屏幕上给出 space 的第 6/12 列直到 md 断点（768px），以及 space 的 8/12 来自 768px 和向上：

<div class="col-6 col-md-8">

Bootstrap 也有 spacing classes 可用于更改列的填充。 px-* classes 设置左右内边距的内边距。默认是 px-3，所以我们可以使用 px-1 来使填充更小，这样相同大小的列可以容纳更多内容。

使用 col-sm-* 和 px-* 的示例：

.row div {border:1px solid lightgray;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
  <div class="row">
    <div class="col-2 col-sm-1 aboutlink px-1">
      About
    </div>
    <div class="col-2 col-sm-1 px-1">
      Store
    </div>
    <div class="col-4 col-sm-8">
    </div>
    <div class="col-2 col-sm-1 gmaillink px-1">
      Gmail
    </div>
    <div class="col-2 col-sm-1 px-1">
      Images
    </div>
  </div>
</div>

2。 Bootstrap 自动 classes

在这种情况下（因为您不需要定义的结构）一个更好的选择可能是使用 col-auto Bootstrap classes，它将仅使用适合所需的 space内容 - 这可以解决必须将列设置为宽度的特定比例（例如 1/12 或 2/12）的问题。

在下面的示例中，我们将前 2 列和后 2 列的宽度设置为 col-auto，这样它们将调整大小以适合其中的文本，然后将中间列设置为 col class 获取剩余可用 space:

.col-auto{ border:1px solid lightgray;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
  <div class="row">
    <div class="col-auto aboutlink px-1">
      Abouttttt
    </div>
    <div class="col-auto px-1">
      Store
    </div>
    <div class="col">
    </div>
    <div class="col-auto gmaillink px-1">
      Gmail
    </div>
    <div class="col-auto px-1">
      Images
    </div>
  </div>
</div>

仅供参考：justify-content-* classes 用于 flexbox 布局并且不适用于网格 classes，因此我已将它们从示例中删除。

当我调整行大小时，我的 Bootstrap 行超出了页面宽度？

My Bootstrap row is extending beyond the page width when I resize it?

html

css

bootstrap-4

bootstrap-grid