Bootstrap导航栏折叠在错误的位置打开

Question

Navbar折叠菜单非常适合Safari浏览器中的导航栏并占据视口的整个宽度。但是，在其他浏览器中，折叠的导航栏变小并且粘在页面的顶部。看起来它没有连接到导航栏本身并从另一个参考点下降。这是浏览器前缀问题还是我的引导结构完全错误？

   .navbar {
      height: 60px; 
      padding: 0;
      margin: 0;
      border-bottom: .1px solid black; 
      background: #ffffff;
   }

   .navbar-nav { 
      margin-top: 1.5em; 
   }

   .navBut {
      margin: 20px 0;
   }

   .navButBut {
      border: 1px solid red;
   }

   .navbar-toggle {
      border-color: black !important;
      color: snow;
      height: 30px;
      width: 45px;
      padding: 2px 5px 0;
      margin: 15px 8% 15px 0;
   }

   .navbar-toggle:hover {
      background-color: transparent !important;
   }

   .dropbut {
      font-size: 1.5em;
      color: black;
   }

   .fa-korvue {
      color: #962715; 
      font-size: 3.5em; 
      line-height: -45%; 
      float: left; 
      margin: 5px 8% 0 12%;
   }

   .link_icon, .link_icon:link, .link_icon:visited, .link_icon:active {
      color: #1e1e20;
      padding: 0;
      margin-right: 20px;
      font-family: 'Arsenal', sans-serif;
      font-size: 1.2em;
      text-decoration: none;
      outline: 0;
      cursor: pointer;
      background: transparent;
   }

    #collapse_menu {
      margin-top: 1.2em;
    }

    #collapse_menu li a {
      padding: 3px 8px;
      margin-right: 5px;
      border-radius: 3px;
   }

   #collapse_menu li a:hover {
      background-color: rgba(0, 0, 0, 0.2) !important;
   }

   .hidden-xs {
      margin-right: 18px;
   }

   #phone_handset {
      color: black;
      font-size: 1.7em; 
      vertical-align: 10%;
      text-decoration: none;
      outline: 0;
      transition: 1s;
   }

   #phone_num {
      display: inline;
      margin-right: 4em; 
      vertical-align: 20%; 
      font-size: 1.3em;
   }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
  <nav class="navbar navbar-fixed-top">
    <div class="container-fluid">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="fa fa-th dropbut"></span>                      
        </button>

        <i class="fab fa-korvue"></i>

        <div class="collapse navbar-collapse" id="myNavbar">

          <ul id="collapse_menu" class="nav navbar-nav text-center">
            <li><a class="link_icon scroll" name="1" href="#top_page_scroll">Начало</a></li>
            <li><a class="link_icon scroll" name="2" href="#about_me_scroll">Обо мне</a></li>
            <li><a class="link_icon scroll" name="3" href="#portfolio_scroll">Услуги</a></li>
            <li><a class="link_icon scroll" name="4" href="#pricing_scroll">Цены</a></li>
            <li><a class="link_icon scroll" name="5" href="#contact_me_scroll">Регистрация</a></li>
          </ul>

          <div class="navbar-nav navbar-right vertical-align">
             <a id="phone_handset" class="fas fa-phone-volume hidden-xs" href="#"></a>
             <a id="phone_num" class="link_icon hidden-xs" href="#">110-223-456-78</a>
          </div>

      </div>
    </div>
  </nav>
</header>

Answer 1

我终于解决了这个问题。如果您使用<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <header> <nav class="navbar navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="fa fa-th dropbut"></span> </button> <i class="fab fa-korvue"></i> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul id="collapse_menu" class="nav navbar-nav text-center"> <li><a class="link_icon scroll" name="1" href="#top_page_scroll">Начало</a></li> <li><a class="link_icon scroll" name="2" href="#about_me_scroll">Обо мне</a></li> <li><a class="link_icon scroll" name="3" href="#portfolio_scroll">Услуги</a></li> <li><a class="link_icon scroll" name="4" href="#pricing_scroll">Цены</a></li> <li><a class="link_icon scroll" name="5" href="#contact_me_scroll">Регистрация</a></li> </ul> <div class="navbar-nav navbar-right vertical-align"> <a id="phone_handset" class="fas fa-phone-volume hidden-xs" href="#"></a> <a id="phone_num" class="link_icon hidden-xs" href="#">110-223-456-78</a> </div> </div> </div> </nav> </header> 包装navbar-toggle，那么一切都会按预期开始工作。现在折叠的导航栏占据全宽并且位于正确的位置。感谢@fnostro提供宝贵的提示。

document.body.innerHTML