【发布时间】：2017-03-30 10:55:32
【问题描述】：
我想删除导航栏和标题之间的白色间隙，我不知道为什么会出现间隙。我希望有人可以帮助我
@import url(http://fonts.googleapis.com/css?family=Lato);
.container
{
width:800px;
overflow:hidden;
display:inline-block;
margin-top: 0px;
}
.side-bar
{
background:#74AFAD;
position:absolute;
height:100%;
width:200px;
color:#fff;
transition: margin-left 0.5s;
}
.side-bar ul
{
list-style:none;
padding:0px;
}
.side-bar ul li.menu-head
{
font-family: 'Lato', sans-serif;
padding:20px;
}
.side-bar ul li.menu-head a
{
color:#fff;
text-decoration:none;
height:50px;
}
.side-bar ul .menu-head a
{
color:#fff;
text-decoration:none;
height:50px;
margin: 0;
}
.side-bar ul .menu li a
{
color:#fff;
text-decoration:none;
display:inline-table;
width:100%;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}
.side-bar ul .menu li a:hover
{
border-left:3px solid #ECECEA;
padding-left:17px;
}
.side-bar ul .menu li a.active
{
padding-left:17px;
background:#D9853B;
border-left:3px solid #ECECEA;
}
.side-bar ul .menu li a.active:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 7px solid #D9853B;
margin-top: -10px;
margin-left: 180px;
}
.content
{
padding-left: 200px;
transition: padding-left 0.5s;
}
.active > .side-bar
{
margin-left:-150px;
transition: margin-left 0.5s;
}
.active > .content
{
padding-left:50px;
transition: padding-left 0.5s;
}
#logout_sidebar {
position: absolute;
display: inline-block;
bottom: 0;
width: 100%;
}
@media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width:calc(100% + 220px);
}
.row-offcanvas-left
{
left: -220px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color:#f5f5f5;
float: left;
height:100%;
position:relative;
overflow-y:auto;
overflow-x:hidden;
}
#main {
height:100%;
overflow:auto;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<title> Bagus Gamestore Admin Dashboard</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="wrapper">
<div class="side-bar">
<ul>
<li class="menu-head">
ADMIN PANEL <a href="#" class="push_menu"><span class="glyphicon glyphicon-align-justify pull-right"></span></a>
</li>
<div class="menu">
<li>
<a href="#" class="active">Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span></a>
</li>
<li>
<a href="#">User List<span class="glyphicon glyphicon-user pull-right"></span></a>
</li>
<li>
<a href="#">Add New Product<span class="glyphicon glyphicon-plus pull-right"></span></a>
</li>
<li>
<a href="welcome.php">Go to Website <span class="glyphicon glyphicon-globe pull-right"></span></a>
</li>
</div>
<div class="menu ">
<li id="logout_sidebar">
<a href="logout.php">Logout<span class="glyphicon glyphicon-log-out pull-right"></span></a>
</li>
</div>
</ul>
</div>
<div class="content">
<!-- show user list -->
<!-- end of show user list-->
</div>
</div>
</div>
</div>
</body>
</html>如您所见，管理面板上有一点缝隙，我该如何消除这些缝隙？之前谢谢你
【问题讨论】：
标签： html css twitter-bootstrap navbar