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

问题描述

我是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，并设置字体大小。

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

谢谢。

解决方法

出了什么问题？

如果我们在列上添加边框，并在单词不合适时允许自动换行，则可以更好地了解正在发生的事情。

看一下这个例子，您会发现在较小的屏幕上，单词不适合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允许您设置cols的断点。因此，举例来说，这些类的意思是：将屏幕上的第6/12列的行间距设置为md断点（768px），将屏幕上的第8/12列的行距设置为768px以上：

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

Bootstrap还具有spacing classes，可用于更改列的填充。 px-*类为左侧和右侧填充设置填充。默认值为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 Auto类

在这种情况下（因为您不需要定义的结构），更好的选择可能是使用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布局，并且不能与网格类一起使用，因此我将其从示例中删除。

bootstrap-4 bootstrap-grid html

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

问题描述

解决方法

相关问答