第一个div坐在我的导航栏里面？
由于某种原因，我在这里不知所措，我的页面上的拳头正在流入并坐在导航栏div内？我检查了关闭div，并尝试重写代码。我很想知道为什么会这样！
这对我来说并不明显，我不确定下一步该往哪里去。
谢谢
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/style.css">
<!--BOOTSTRAP link to bootstrap stylesheet | v4.1 | 30May18-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<!--BOOTSTRAP JS import link to bootstrap stylesheet | v4.1 | 04Jun18-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous"></script>
<style>
/*Navbar styling*/
.navbar {
background-color: #8A84E2;
}
h1,
h2,
h3,
{
font-family: Georgia;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 10px;
}
p,
ol,
ul {
font-size: 16px;
font-family: calibri;
}
section {
padding: 10px;
}
.myContent {
padding: 0px 20px 0px 20px;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--Navbar copied and adapted via bootstrap-->
<nav class="navbar navbar-expand-sm navbar-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="/index.html">
<img src="styles/images/LCicon.png" width="50" height="50">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
100DaysOfCode
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="100-days-all-pages/1-blog.html">1: This Blog</a>
<a class="dropdown-item" href="100-days-all-pages/1-blog.html#day1">2. CSS Koala</a>
<a class="dropdown-item" href="100-days-all-pages/1-blog.html#day2">3. Laravel</a>
<a class="dropdown-item" href="100-days-all-pages/1-blog.html#day4">4. Updates & FCC</a>
<a class="dropdown-item" href="100-days-all-pages/1-blog.html#day5">5. </a>
<a class="dropdown-item" href="100-days-all-pages/1-blog.html#day6">6. </a>
<a class="dropdown-item" href="100-days-all-pages/1-blog.html#day7">7. </a>
<a class="dropdown-item" href="100-days-all-pages/1-blog.html#day8">8. </a>
<a class="dropdown-item" href="100-days-all-pages/1-blog.html#day9">9. </a>
<a class="dropdown-item" href="100-days-all-pages/1-blog.html#day10">10. </a>
<a class="dropdown-item" href="100-days-all-pages/1-blog.html#day11">11. </a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!--End Nav-->
<!--Jumbotron-->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
<!--Jumbotron End-->
<div class="container">
<p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over
the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,
and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum
comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard
chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33
from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied
by English versions from the 1914 translation by H. Rackham. Where can I get some? There are many variations
of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators
on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate
Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected
humour, or non-characteristic words etc.</p>
</div>
</body>
</html>
2 个答案:
答案 0 :(得分：1)
如果您将.navbar位置相对和.jumbotron-fluid位置相对，这将解决您的问题。我会阅读位置here，因为这些知识在使用前端代码时非常宝贵
请参阅此jsFiddle，其中包含已实施的职位：相对于上述类
答案 1 :(得分：1)
你在nav类中使用了fixed-top
<nav class="navbar navbar-expand-sm navbar-light fixed-top">
这会导致问题。
- 您可以删除它，但之后您的nabvar将不会被修复
- 或者您可以添加此css类
.jumbotron{
margin-top: 80px;
}
更好地将除了导航栏之外的所有其他部分包装在.wrapper {margin-top：80px;}中并且您不必担心它
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？