我有一个奇怪的问题。我的静态导航栏正在发生一些事情,我无法弄清楚那是什么。最好的方法是展示它
所以你可以看到。我试图在导航栏下添加一个标题,就像一个封面,但导航栏总是会改变,你可以看到它在导航栏和标题之间有一个小的差距,这是代码:
的header.php
<!DOCTYPE html>
<html>
<head>
<title><?php echo $pageTitle; ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/blog/css/style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Font Awesome ikonice jbg ovo koristim -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="/blog"><i class="glyphicon glyphicon-home"></i> <?php echo $lang['MENU_HOME']; ?></a></li>
<?php
if(!logged_in())
{
echo '
<li><a href="#"><i class="fa fa-users"></i> ', $lang['MENU_ABOUT'],'</a></li>';
}
else
{
echo '
<li><a href="#"><i class="glyphicon glyphicon-inbox"></i> ', $lang['MENU_MESSAGES'],'</a></li>
<li><a href="#"><i class="glyphicon glyphicon-heart"></i> ', $lang['MENU_NOTIFICATIONS'],'</a></li>';
}
?>
</ul>
<ul class="nav navbar-nav navbar-right">
<?php
if(!logged_in())
{
echo
'
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Language:
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="chlng.php?lang=english">English (US)</a></li>
<li><a href="chlng.php?lang=serbian">Srpski</a></li>
<li><a href="chlng.php?lang=croatian">Hrvatski</a></li>
<li><a href="chlng.php?lang=german">Deutsch</a></li>
</ul>
</li>
';
}
else
{
echo
'
<li class="dropdown">
<img data-toggle="dropdown" class="circle" height="40" width="40" src="/blog/uploads/',$_SESSION['avatar'],'">
<ul class="dropdown-menu">
<li><a href="/blog/', $_SESSION['username'] ,'">', $lang['MENU_ACCOUNT'] ,'</a></li>
<li><a href="/blog/settings">', $lang['MENU_SETTINGS'] ,'</a></li>
<li><a href="/blog/logout">', $lang['MENU_LOGOUT'] ,'</a></li>
</ul>
</li>
';
}
?>
</ul>
</div>
</nav>
view_profile.php
<?php
echo '
<div class="header-profile">
dfdsfsd
</div>
';
?>
头轮廓
.header-profile
{
display: block;
content: "";
position: absolute;
height: 22%;
width: 100%;
box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2);
background-color: #1DA1F2 !important
}
答案 0 :(得分:1)
默认情况下,Bootstrap导航栏的底部边距为20px。
集
nav {
margin-bottom: 0;
}