[英]Bootstrap sidebar and content under navbar
有人可以帮我解决这个问题吗? 为什么我的侧边栏和内容在导航栏中? 我尝试删除类并进行一些更改,但没有成功。
侧边栏和内容应该在导航栏下吗?
我知道我可以在行中创建该类插入并解决我的问题,但是我在尝试解决方案时不创建任何CSS或额外的类。
.margin-top100{
margin-top:100px;
}
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
project
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right text-center">
<li><i class="fa fa-pencil" aria-hidden="true"></i>
<br>link </li>
<li><i class="fa fa-gavel" aria-hidden="true"></i>
<br>link</li>
<li>
<br> Welcome </li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-mg-2 col-sm-2"> sidebar </div>
<div class="col-mg-10 col-sm-10"> content </div>
</div>
</div>
CSS:
.navbar-inverse {
padding: 20px;
color: white;
}
jsfiddle: https ://jsfiddle.net/5zc66j20/
谢谢。
按照Bootstrap上的文档: http : //getbootstrap.com/components/#navbar-fixed-top 。 默认情况下,导航栏的高度为50px。
解决方案1:
body {
padding-top: 70px;
}
解决方案2:
将类: navbar-fixed-top
更改为navbar-static-top
谢谢大家
仅由于position
属性,就会发生此问题。 现在的解决方案是:
.margin-top100{
margin-top:100px;
}
当您的内容部分开始时,请使用margin-top100
类。
我强烈建议您使用本教程
在我看来,它们为主体顶部添加了填充。 我承认我也不对这个答案感到疯狂。 但是,如果导航栏的position: fixed;
,没有办法使其他元素自动在其周围流动(这是一种position: fixed
点)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.