Question

我正在尝试使用引导程序4的容器，容器流体，巨型类。我使用的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元素与容器流体类的h1元素略有重叠。我想了解为什么会发生这种情况，这是Firefox Quantum中的错误吗？还是因为Bootstrap 4中的超大型飞机或集装箱液体有任何特性？

Answer 1

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

这是它的一些特征：

<span>标签用于对文档中的行内元素进行分组。
<span>标签本身并没有提供视觉上的改变。
<span>标记提供了一种将钩子添加到文本或文档的一部分。

您的问题询问为什么span与h1类重叠container-fluid元素。而且，由于行内礼节性，我之前怎么说。

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

Jumbotron与Bootstrap 4中的先前元素重叠

1 个答案: