添加标题时,导航栏会更改大小

时间:2017-03-29 17:23:46

标签: html css twitter-bootstrap header positioning

我有一个奇怪的问题。我的静态导航栏正在发生一些事情,我无法弄清楚那是什么。最好的方法是展示它

the problem

所以你可以看到。我试图在导航栏下添加一个标题,就像一个封面,但导航栏总是会改变,你可以看到它在导航栏和标题之间有一个小的差距,这是代码:

的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
}

1 个答案:

答案 0 :(得分:1)

默认情况下,Bootstrap导航栏的底部边距为20px。

nav {
    margin-bottom: 0;
}