Bootstrap Navbar佔用兩行

好吧，我的問題是我的導航欄佔用了兩行，當我在桌面分辨率，當我去一個手機的大小，它適合完美。我已經通過了幾個小時的代碼無濟於事。任何幫助將不勝感激。 HTML代碼可以在下面找到。Bootstrap Navbar佔用兩行

<!DOCTYPE HTML> 

<!-- HTML --> 

<html> 

<!-- Header --> 

<head> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <link href="css/styles.css" rel="stylesheet"> 

</head> 

<!-- Header End --> 

<!-- Body --> 

<body> 

    <!-- NavBar --> 

     <div class="navbar navbar-inverse navbar-fixed-top"> 

      <!-- NavBar Header --> 

      <div class="navbar-header"> 

       <!-- Fiaware Branding --> 

       <a href="#" class="navbar-brand">FiAware</a> 

       <!-- Fiaware Branding End --> 

       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 

        <span class="icon-bar"></span> 

        <span class="icon-bar"></span> 

        <span class="icon-bar"></span> 

       </button> 

       <!-- Desktop Visible/ Mobile Visible Upon Click --> 

       <div class="navbar-collapse collapse navbar-responsive-collapse"> 

        <ul class="nav navbar-nav"> 

         <li class="active"><a href="http://fiaware.com/index.html">Home</a></li> 

         <li><a href="http://fiaware.com/about.html">About</a></li> 

         <li><a href="http://fiaware.com/forums">Forums</a></li> 

          <!-- Dropdown Menu --> 

          <li class="dropdown"> 

           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Games <b class="caret"></b></a> 

           <ul class="dropdown-menu"> 

           <li><a href="http://fiaware.com/roller.html">Roller-In Development</a></li> 

           </ul> 

          </li> 

          <!-- Dropdown Menu End --> 

        <li><a href="http://fiaware.com/support.html">Support</a></li> 

        <li><a href="http://fiaware.com/contact.html">Contact</a></li> 

        </ul> 

       </div> 

       <!-- Desktop Visible/ Mobile Visible Upon Click End --> 

      </div> 

      <!-- NavBar Header End --> 

     </div> 

    <!-- NavBar --> 

    <!-- Jumbotron --> 

    <div class="jumbotron text-center"> 

     <h1>We makes your ideas a reality</h1> 
     <p>We are a game development studio that is eager to let everyone give their two cents in our games.</p> 
     <p><a class="btn btn-primary btn-lg" role="button">Learn More</a></p> 

    </div> 

    <!-- Jumbotron End --> 

    <!-- Fixed Footer --> 

    <div class="navbar navbar-default navbar-fixed-bottom"> 

     <div class="container"> 

      <p class="navbar-text pull-left">Site Built By Stormy Wentworth & Derek Sisco <br>Copyright &copy; 2017 FiAware Ltd.<em> All right reserved to their respective owners.</em></p> 

      <a href="#" class="navbar-btn btn-info btn pull-right">Donate - Coming Soon</a> 

     </div> 

    </div> 

    <!-- Fixed Footer End --> 

    <!-- Script --> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <!-- Script End --> 

</body> 

<!-- Body End-->

來源

2017-03-20 Stormy Wentworth

修改：

<div class="navbar-header">

要：

<div class="navbar-header" style="float:none;">

來源

2017-03-20 22:27:29

非常感謝。 :) –

試試這個：

<div class="navbar-header"> 
    <a href="#" class="navbar-brand">FiAware</a> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 

        <span class="icon-bar"></span> 

        <span class="icon-bar"></span> 

        <span class="icon-bar"></span> 

       </button> 
</div> <!-- close the navbar-header" div here -->

來源

2017-03-20 22:37:52 nizantz

Bootstrap Navbar佔用兩行

回答

相關問題