CSS减去边距的问题
CSS减去边距的问题
提问于 2018-06-18 20:54:05
我有使用负边距来放置导航栏内的div有一个类main..in小屏幕，当我点击导航栏切换图标它看起来不像good..because我需要更改边距again...how我可以解决这个问题而不使用负边距吗？
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<div class="top"></div>
<div class="wrapper">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navDrop">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navDrop">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">SKILL</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">PORTFOLIO</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">TEAM</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">BLOG</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">CONTACT</a>
</li>
</ul>
</div>
</nav>
<div class="main"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/4.1.1/js/bootstrap.min.js"></script>下面是我的代码的输出：https://codepen.io/Sakhawat5/pen/NzwQJz
回答 2
Stack Overflow用户
发布于 2018-06-19 04:04:07
这就是你的解决方案：
.top{
height:50px;
background:red;
}
.navbar{
margin-left:20px;
margin-right:20px;
}
.main{
height:1500px;
background:orange;
}<div class="top"></div>
<div class="wrapper">
<div class="main">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navDrop">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navDrop">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">SKILL</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">PORTFOLIO</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">TEAM</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">BLOG</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/4.1.1/js/bootstrap.min.js"></script>
Stack Overflow用户
发布于 2018-06-19 04:08:00
对CSS所做的如下更改应该可以解决此问题：
.navbar{
margin-left: 5%;
margin-right: 5%;
width: 90%;
position: fixed;
}如果你不想要固定的导航：
.navbar{
margin-left: 5%;
margin-right: 5%;
width: 90%;
position: absolute;
}如果你有任何问题，请告诉我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50910012
复制相关文章
相似问题