2017-03-20 20 views
2

私の問題は、私がデスクトップの解像度になっているときにNavbarが2行を占めていることです。私は時間を無駄にするコードを通過しました。どんな助けでも大歓迎です。 HTMLコードは以下にあります。ブートストラップNavbarは2行を取ります

<!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--> 

答えて

2

修正:

<div class="navbar-header"> 

へ:

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

ありがとうございます。 :) –

0

これを試してみてください:

<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 --> 
関連する問題