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

【问题标题】：My Bootstrap row is extending beyond the page width when I resize it?当我调整它的大小时，我的 Bootstrap 行超出了页面宽度？
【发布时间】：2021-01-22 23:10:03
【问题描述】：

我对 Bootstrap 非常陌生，并且一直在学习一些教程。我目前正在尝试重建 Google 的主页，但在网格系统的响应能力方面遇到了一些困难。

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

    <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”类只是将文本向右对齐，topbar id 有 15px 的边距并设置字体大小。

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

谢谢。

【问题讨论】：

标签： html css bootstrap-4 bootstrap-grid

【解决方案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.断点和填充类

Bootstrap's grid classes 允许您为列设置断点。因此，例如，这些类的意思是：将屏幕上 6/12 列的空间设置为 md 断点（768px），以及 768px 及以上空间的 8/12：

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

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

使用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。引导自动类

在这种情况下，更好的选择（因为您不需要定义的结构）可能是使用 col-auto Bootstrap classes 将仅使用适合内容所需的空间 - 这可以克服具有将 cols 设置为宽度的特定比例，例如 1/12 或 2/12。

在下面的示例中，我们将前 2 列和后 2 列的宽度设置为 col-auto，以便它们调整大小以适应其中的文本，然后将中间列指定为 col 类以获取其余部分可用空间：

.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-* 类用于 flexbox 布局，不适用于网格类，因此我已将它们从示例中删除。

【讨论】：

非常感谢您提供如此详细的回复，非常感谢您花时间为我解释一切。这一切都很有意义。没想到要在列上添加边框，肯定需要努力了解如何更好地解决这些问题 - 再次感谢您帮助我！在可能的情况下，我将坚持汽车课程向前发展。 :)
@Tjm92 很高兴为您提供帮助！选择正确的 col 类完全取决于您想要什么 - 很多时候断点类，例如col-4 col-md-3 非常理想，尤其是当您尝试创建定义的网格结构时，例如图像库或相同的文本块。熟悉所有最适合不同情况的选项和学习需要时间。有时它仍然可以归结为一些试验和错误:)
@Tjm92 另外，为了让事情更复杂，您还拥有 CSS 网格和 flexbox！它们也值得一看，它们比 Bootstrap 网格更灵活，但这也意味着它们有更多的选择，这使得学习它的工作原理变得更加困难。也许坚持使用 Bootstrap，因为它开始时更直观，然后当您需要更灵活的较少类似网格的布局时继续使用 flexbox。
感谢您提供的其他提示，在接下来的几周内肯定会与他们一起玩 - 希望它很快就会开始成为第二天性。我确实读过一些帖子，我应该尽量远离 Bootstrap 网格，而是花时间学习其他 Web 布局模型。但我会照你说的做，然后将 Flexbox 视为下一步。再次感谢，非常感谢！！！
@Tjm92 CSS 网格可能正在取代 Bootstrap 网格，但 IMO Bootstrap 网格类在您刚开始时更容易学习，因为它更易于可视化和定义......这只是我的意见虽然:)