时间戳

首页 > 解决方案 > Jumbotron 与引导程序 4 中的先前元素重叠

css - Jumbotron 与引导程序 4 中的先前元素重叠

问题描述

我正在尝试使用引导程序 4 的容器、容器流体、jumbotron 类。我使用的 HTML 代码是：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<h1 class="container">contaigjnohjbofitujkiner</h1>
<h1 class="container-fluid">containfhonjoiyjboifgber</h1>
<span class="jumbotron">jumbotofgbnoitrjbogiftjron</span>
</body>
</html>

在这个文件的输出中，我注意到带有 jumbotron 类的 span 元素与 container-fluid 类的 h1 元素略有重叠。我想了解为什么会发生这种情况，这是 Firefox 量子中的错误吗？还是因为bootstrap 4中jumbotron或container-fluid的任何属性？

标签： csshtmlbootstrap-4

解决方案

正如@zgood 在他的评论中所说，默认情况下span是一个display: inline元素。

以下是它的一些特点：

  • 标签用于对文档中的<span>内联元素进行分组。

  • 标签本身不提供<span>视觉变化。

  • 标签提供了一种方法来将<span>钩子添加到文本的一部分或文档的一部分。

你的问题问为什么元素与类span重叠。而且，正如我之前所说的那样，因为内联的礼节。h1container-fluid

看看这个例子，使用 a<div>看看它是如何不再重叠的。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
  <h1 class="container">Lorem ipsum - Container</h1>
  <h1 class="container-fluid">Lorem ipsum - Container Fluid</h1>
  <div class="jumbotron">Lorem ipsum - Jumbotron</div>
</body>
</html>

推荐阅读