桌面和移动设备Navbar

我即将拉出我的头发。我一直在努力尝试让全屏显示在顶部（反向）的导航栏，但是作为移动设备上的汉堡包。我原本在桌面设备上表现出色（请看附图）。现在我有汉堡显示好了，但桌面设备上的导航栏完全不显示。我已将代码剥离到最低限度，但无法让导航栏显示在桌面设备上。我在下面包含了我的代码？有任何想法吗。我非常沮丧。桌面和移动设备Navbar

<!DOCTYPE html> 
    <html> 
     <head>  
    <title>Project X -- Home</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no"> 
    <link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="css/bsStyle.css"> 
    <link href="_/css/bootstrap.css" rel="stylesheet" media="screen"> 
    <link href="_/css/mystyles.css" rel="stylesheet" media="screen"> 


     </head> 
    <body id="home"> 

    <div class="container">  
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li><a href="index.php">Home</a></li> 
       <li><a href="">About Us</a></li> 
       <li><a href="contact.php">Contact Us</a></li> 
       <li><a href="signup.php">Sign Up</a></li> 
      </ul><!-- nav navbar-nav --> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="register.php">Register</a></li> 
       <li class="divider-vertical"></li> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" href="#" data-toggle="dropdown">Log In <strong class="caret"></strong></a> 
        <div class="dropdown-menu pull-right" style="padding: 15px; padding-bottom: 10px;"> 
         <form action="login.php" method="post"> 
          Username:<br /><input type="text" name="username" value="<?php echo $submitted_username; ?>" /> 
          <br /><br /> 
          Password:<br /><input type="password" name="password" value="" /> 
          <br /><br /> 
          <input type="submit" class="btn btn-info" value="Login" /> 
         </form> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div><!--container-fluid--> 
    </nav> 

    </div><!--container--> 

    <section class="sidebar col col-lg-4"> 

    </section><!-- sidebar --> 

    <section class="row"> 

      <div class="col-xs-12"> 
      <section class="branding">   
       <a href="index.php"><img src="/projectx/images/logo1.png" alt="Logo For Project X"></a>    
       <span style="color:red; float:right; margin-top:4%; margin-right: 4%; border: 3px black solid; padding: 3%">   
       </span> 
      </section> 
      </div> 

    </section><!-- branding --> 

</section><!--sidebar--> 
    <script src="_/js/bootstrap.js"></script> 
    <script src="_/js/myscript.js"></script> 
    </body> 
</html>

来源

2015-08-08 jjones150

我觉得这个调整你的容器和形式应该有所帮助。但我不确定SPAN的品牌部分会发生什么情况。

.navbar .dropdown-menu { 
 
    width: 300px; 
 
    padding: 10px; 
 
} 
 
.navbar .dropdown-menu { 
 
    border-radius: 0; 
 
    box-shadow: none; 
 
} 
 
.navbar .dropdown-menu form .form-group .form-control, 
 
.navbar .dropdown-menu form .form-group label, 
 
.navbar .dropdown-menu form .form-group .btn-primary { 
 
    margin: 5px 0; 
 
} 
 
.navbar-right { 
 
    padding-right: 15px; 
 
} 
 
@media (max-width: 768px) { 
 
    .navbar .dropdown-menu form .form-group { 
 
    color: #fff; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
    </div> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-navbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home<span class="sr-only">(current)</span></a> 
 

 
     </li> 
 
     <li><a href="#">About Us</a> 
 

 
     </li> 
 
     <li><a href="#">Contact Us</a> 
 

 
     </li> 
 
     <li><a href="#">Sign Up</a> 
 

 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu" role="menu"> 
 
      <li> 
 
       <form action="login.php" method="post"> 
 
       <div class="form-group"> 
 
        <label for="username">Username</label> 
 
        <input class="form-control" type="text" name="username" /> 
 
        <label for="password">Password</label> 
 
        <input class="form-control" type="password" name="password" /> 
 
        <input class="btn btn-primary" type="submit" name="submit" value="Sign In" /> 
 
       </div> 
 
       </form> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
    <section class="sidebar col col-lg-4"></section> 
 
    <!-- sidebar --> 
 
    <section class="row"> 
 
    <div class="col-xs-12"> 
 
     <section class="branding"> 
 
     <a href="index.php"> 
 
      <img src="http://placehold.it/50x50" alt="Logo For Project X" /> 
 
     </a> <span style="color:red; float:right; margin-top:4%; margin-right: 4%; border: 3px black solid; padding: 3%">   
 
        </span> 
 

 
     </section> 
 
    </div> 
 
    </section> 
 
    <!-- branding --> 
 
</div>

来源

2015-08-08 07:10:26 vanburen

我想implememt此代码，一切看起来都咕，但是当我点击下拉菜单，没有出现 – jjones150

你是如何实现它：重用的一切或仅部分？你有没有发布的自定义CSS？ – vanburen

更新：我一直在试图将这些东西拼凑在一起并进行修改。我发现我在主页的底部留下了下面一段代码： \t \t 这是造成这个问题。我仍在研究代码以了解实际发生的情况，但这似乎是问题所在。 – jjones150

桌面和移动设备Navbar

回答

相关问题