问题：当我使用 bootstrap 4 网格系统将图像添加到列时出现水平滚动条答案

【问题标题】：Problem: horizontal scrollbar appears when I add an image to a column using bootstrap 4 grid system问题：当我使用 bootstrap 4 网格系统将图像添加到列时出现水平滚动条
【发布时间】：2020-06-01 02:20:47
【问题描述】：

我是编码和网络开发的超级新手，我不知道如何解决我的问题：

我正在尝试将图像添加到我使用 bootstrap 4 网格系统创建的列中。但是，我一添加图像，屏幕上就会出现一个水平滚动条，我不知道为什么。

这是发生的情况的屏幕截图：https://gyazo.com/c383ecb9180181349363e0636047867c

<div class="container">
<div class="row">
    <div class="col-6">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="col-6">
        <img src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
    </div>
</div>

我的第二个问题是，虽然当我为图像使用“img-fluid”类时水平滚动条被删除，但是当我将容器更改为 container-fluid 以使其覆盖整个屏幕宽度时为我的容器使用“px-0”类来删除额外的填充，我的屏幕上再次出现水平滚动条。

<div class="container-fluid px-0">
<div class="row">
    <div class="col-6">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="col-6">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
    </div>
</div>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

问题的根本原因是对图像应用的“宽度”没有限制。图像非常大，因此会导致出现水平滚动条。

Bootstrap 提供了一个名为“img-fluid”的类来解决这个常见问题。

可以通过指定'img-fluid'的图片类来避开水平滚动条，如下图。

使用 container-fluid px-0 的第二个问题可以通过指定 px-lg-5 类而不是 px-0 来解决。（px-lg-5 适用于宽部分/最外层 div）

'img-fluid' 和 container-fluid px-lg-5 类的工作示例：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
    <title>Bootstrap - responsive image</title>
  </head>
  <body>
    <div class="container-fluid px-lg-5">
      <div class="row">
          <div class="col-6">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
          <div class="col-6">
              <img class="img-fluid" 
                   src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
          </div>
      </div>
  </body>
</html>

输出：

【讨论】：

这确实解决了问题，但我也遇到了另一个问题：当我将容器类更改为“container-fluid”以便它覆盖屏幕的整个宽度并使用 px-0 时再次删除填充我会出现水平滚动条。
container-fluid 将使容器占据屏幕的整个宽度。此类可以设置为最外层的 div。将其设置在内部元素上可能会导致不良影响。有关容器流体的更多信息，请访问getbootstrap.com/docs/4.0/layout/overview
你能再看看我的帖子吗？我用我的代码更新了它。我已将容器流体设置为最外层的 div，但我仍然面临同样的问题。
我用 'container-fluid px-lg-5' 类更新了外部 div 的答案。您能否验证问题现在是否已解决？
我希望将图片粘贴到屏幕左侧。此外，您能否详细说明为什么 px-0 不起作用？

【解决方案2】：

如果您希望页面不滚动，您可以设置溢出：隐藏到第二列容器，或者您可以设置图像的高度和宽度以避免滚动并使整个图像可见。

 <div class="col-6">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 </div>
 <div class="col-6" style="overflow: hidden">
   <img height="100px" width="100px" src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80" />
 </div>

在https://www.w3schools.com/css/css_overflow.asp 了解更多关于溢出属性和https://www.w3schools.com/html/html_images.asp 的图像属性

要解决您的第二个问题，只需将margin:0 添加到<div class="row">

【讨论】：