ブートストラップページが機能しない：余分な改行とドロップダウンメニューが機能しない

Question

私はブートストラップを利用するウェブサイトを持っています。それは数日間オンラインでした。ただし、今日はドロップダウンメニューが機能しなくなり、メニューと本文の間に改行があります。これは私にとってだけでなく、ブートストラップを使用する他の人にとっても問題です。 navbarの後に、私はフェードインする青い帯を持っています。 問題を引き起こしているのは何ですか、それはちょうど私の問題ですか？どうやってそれを解決するのですか？ありがとう！

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="#">My Site</a> 
    </div> 
    <div class="collapse navbar-collapse net-27" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown Menu<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Option 1</a></li> 
      <li><a href="#">Option 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Contribute</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class=""></span> Login</a></li> 
     <li><a href="#"><span class=""></span> Sign Up</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

     <!-- Page Content --> 
     <div class="container-fluid"> 
      <div class="row"> 

          <center> 

           <div id="test" style="background-color:#001A57; color:#FFFFFF; font-family:Lucida Bright, Arial, sans-serif";> 
            <p style="text-align:center;">Welcome!</p> 
            <br /><p id="nothuge" class="plzplz"></p> 
            <br /> 
            <p style="font-size:20px;">--Site Info--</p> 
            <br /><p style="font-size:30px;"> 
            <a href="#">Login/Register</a></p> 
           </div> 
           <br /> 
           <br /> 
           <h1>Welcome</h1> 
          </center> 
      </div> 


      <!-- /.row --> 

      <div class="row"> 

        <center> 
        <p class="lead">Text</p> 
        <p class="intro-line2" id="bittearbeit">MoreText</p> 
        </center> 
       </div> 
      <footer class="margin-tb-3"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <p>© My Site 2017 | contact@my.site</p> 

        </div> 
       </div> 
      </footer> 
     </div> 
     <!-- /.container-fluid --> 

</body> 

（https://jsfiddle.net/user2015748/g776473m/1/） は、私はあなたがJSFiddleで見ることができるとCSSの多くを、持っています。 ご覧のとおり、ナビゲーションバーの後に改行コードはありません。助けてくれてありがとう！

Answer 1

この行を追加するCSS文があります。その「マージンボトム：20ピクセル」 試してみてください：

.navbar { 
    position: relative; 
    min-height: 50px; 
    margin-bottom: 0px; 
    border: 1px solid transparent; 
}