Question

我准备拔头发了。我一直在尝试让一个导航栏在全屏幕上呈现顶部（反向），但作为移动设备上的汉堡包。我最初在桌面设备上有一些很好的东西（见附图）。现在我的汉堡包显示好了，但桌面设备上的导航栏根本没有出现。我已将我的代码剥离到最低限度，但无法让导航栏显示在桌面设备上。我在下面包含了我的代码？有任何想法吗。我非常沮丧。

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

Answer 1

我认为对容器和表格的这种调整应该会有所帮助。我不确定您的品牌部分中的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>

桌面与移动设备Navbar

1 个答案: