Jumbotron overlapping previous elements in bootstrap 4
Question
I was trying to experiment with container, container-fluid, jumbotron classes of bootstrap 4. The HTML code i used is:
<!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>
In the output of this file I noticed that span element with jumbotron class was slightly overlapping h1 element with container-fluid class. I want to understand why this happened is this a bug in firefox quantum? or is it because any property of jumbotron or container-fluid in bootstrap 4?
1 answers
solution1
1 ACCPTED 2018-08-30 15:56:04
As @zgood said in his comment, the span is a display: inline element by default.
Here are some characteristics of it:
The
<span>tag is used to group inline-elements in a document.The
<span>tag provides no visual change by itself.The
<span>tag provides a way to add a hook to a part of a text or a part of a document.
Your question aked why span was overlapping h1 element with container-fluid class. And, how I said before, because of the inline propriety.
Check out this example, using a <div> and see how it is no more overlapping.
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.