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

Question

I'm very new to Bootstrap and have been working through some tutorials.我是 Bootstrap 的新手，一直在学习一些教程。 I'm currently trying to rebuild Google's homepage and have run into some difficulty with the responsiveness of the grid system.我目前正在尝试重建 Google 的主页，但在网格系统的响应能力方面遇到了一些困难。

I've created a very basic layout of the top bar on Google's homepage and it more or less looks fine as it is fullscreen;我在 Google 主页上创建了一个非常基本的顶部栏布局，它或多或少看起来不错，因为它是全屏的； however, when I resize the window, the text on the right hand side spills over the width of the window.然而，当我调整 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>

Here's an image of the issue:这是问题的图片：

The classes "aboutlink" and "gmaillink" are simply aligning the text to the right and the topbar id has a 15px margin and sets the font size. “aboutlink”和“gmaillink”类只是将文本右对齐，topbar id 有 15px 的边距并设置字体大小。

I've had a read through the responsive breakpoints and grid system documentation, but can't seem to fix this issue.我已经阅读了响应断点和网格系统文档，但似乎无法解决此问题。 Would be grateful if anyone could share some advice?如果有人可以分享一些建议，将不胜感激？

Thank you.谢谢你。

Answer 1

What is going wrong?出了什么问题？

If we add a border to the columns and allow the word to wrap if it doesn't fit, we can see better what is happening.如果我们在列中添加边框并允许单词在不适合时换行，我们可以更好地看到正在发生的事情。

Take a look at this example, and you will see that on smaller screens the words are not fitting into the col-1 divs, and because words don't wrap by default it is causing the col to grow bigger than it should be to accommodate the size of the text:看看这个例子，你会发现在较小的屏幕上，单词不适合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. Breakpoints and padding classes 1.断点和填充类

Bootstrap's grid classes to allow you to set the breakpoints for the cols. Bootstrap 的网格类允许您为列设置断点。 So for example these classes mean: give the column 6/12 of the space on screens up to the md breakpoint (768px), and 8/12 of the space from 768px and up:例如，这些类的意思是：给屏幕上的列 6/12 的空间直到 md 断点（768px），以及 8/12 的空间从 768px 开始：

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

Bootstrap also has spacing classes that can be used to change the padding of the columns. Bootstrap 也有间距类，可用于更改列的填充。 The px-* classes set the padding for the left and right padding. px-*类设置左右填充的填充。 The default is px-3 , so we can use px-1 to make the padding smaller and so the same size columns can fit in more content.默认是px-3 ，所以我们可以使用px-1来使填充更小，这样相同大小的列可以容纳更多的内容。

Example using col-sm-* and px-* :使用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 Auto classes 2. 引导自动类

A better option in this case (as you don't need a defined structure) might be to use the col-auto Bootstrap classes that will use only the space needed to fit the content - this can overcome the problem of having to set the cols to a specific proportion of the width, such as 1/12 or 2/12.在这种情况下（因为您不需要定义的结构）一个更好的选择可能是使用col-auto Bootstrap 类，它只使用适合内容所需的空间——这可以克服必须设置 cols 的问题到宽度的特定比例，例如 1/12 或 2/12。

In the example below, we set the width of the first 2 and last 2 columns to col-auto so they will resize to fit the text inside them, and then give the middle column the col class to take the rest of the available space:在下面的示例中，我们将前 2 列和后 2 列的宽度设置为col-auto ，以便它们调整大小以适应其中的文本，然后将中间列的col设置为 class 以占用可用空间的 rest：

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

FYI: the justify-content-* classes are for flexbox layouts & don't work with the grid classes, so I have removed them from the examples.仅供参考： justify-content-*类用于 flexbox 布局并且不适用于网格类，因此我已将它们从示例中删除。

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-10-07 23:48:50

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-10-07 23:48:50

解决方案1
3 已采纳 2020-10-07 23:48:50