添加标题时导航栏更改大小[重复]答案

【问题标题】：navbar changes size when adding header [duplicate]添加标题时导航栏更改大小[重复]
【发布时间】：2017-08-23 08:01:25
【问题描述】：

我有一个奇怪的问题。我的静态导航栏出了点问题，我不太清楚那是什么。最好的方式是展示它

如您所见。我正在尝试在导航栏下添加一个标题，就像一个封面一样，但是导航栏总是在变化，你可以看到它在导航栏和标题之间产生了一个小间隙，这是代码：

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
}

【问题讨论】：

标签： html css twitter-bootstrap header positioning

【解决方案1】：

默认情况下，Bootstrap 导航栏的下边距为 20 像素。

设置

nav {
    margin-bottom: 0;
}

【讨论】：