Html 当我调整引导行的大小时，它是否超出了页面宽度？_Html_Css_Bootstrap 4_Bootstrap Grid

Html 当我调整引导行的大小时，它是否超出了页面宽度？

html css bootstrap-4

Html 当我调整引导行的大小时，它是否超出了页面宽度？,html,css,bootstrap-4,bootstrap-grid,Html,Css,Bootstrap 4,Bootstrap Grid,我对Bootstrap非常陌生，一直在学习一些教程。我目前正试图重建谷歌的主页，但在网格系统的响应能力方面遇到了一些困难我已经在谷歌主页上创建了一个非常基本的顶栏布局，它或多或少看起来很好，因为它是全屏的；但是，当我调整窗口大小时，右侧的文本会溢出窗口的宽度 <body> <div class="container-fluid" id="topbar"> <div class="

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

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

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


关于
商场
Gmail
图像

以下是该问题的图像：

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

我已经通读了响应断点和网格系统文档，但似乎无法解决这个问题。如果有人能分享一些建议，我会很感激的

谢谢。

怎么了？

如果我们在列中添加边框，并允许单词在不合适时进行换行，我们可以更好地看到正在发生的事情

看看这个例子，您会发现在较小的屏幕上，单词不适合

col-1

div，并且由于单词默认不换行，因此会导致col变大，以适应文本的大小：

.col-1{
溢出换行：断开字；边框：1px实心浅灰色；
}


关于
商场
Gmail
图像

非常感谢您的详细回复，非常感谢您花时间为我解释一切。这一切都很有道理。没有想到要在专栏中添加边框，一定需要更好地了解如何解决这些问题-再次感谢您在我的道路上帮助我！在可能的情况下，我将继续学习汽车课程。：）@Tjm92很高兴帮助您！选择正确的col类完全取决于您想要什么-很多时候断点类（例如，

col-4 col-md-3

）是理想的，特别是当您试图创建定义的网格结构时，例如图像库或相等的文本块。熟悉所有最适合不同情况的选项和学习需要时间。有时它仍然可以归结为一点尝试和错误：）@Tjm92也一样，只是为了让事情变得更复杂，你还有CSS网格和flexbox！它们也值得一看，它们比自举网格更灵活，但这也意味着它们有更多的选择，这会使了解其工作原理变得更加困难。也许坚持使用Bootstrap，因为它更直观，当你需要一个灵活的少网格的布局时，可以继续使用flexbox。谢谢你提供的额外提示，在接下来的几周里肯定会使用它们-希望这一切很快就会开始成为第二天性。我确实在一些帖子上读到，我应该尽量远离引导网格，而是花时间学习其他web布局模型。但我会按照你说的做，然后将Flexbox作为下一步。再次感谢，非常感谢@Tjm92 CSS网格可能正在取代引导网格，但IMO引导网格类在您开始学习时更容易一些，因为它更容易可视化和定义。。。这只是我的观点：）