css - 导航栏对齐不良，移动 View 失真

Question

Logo 、搜索栏、购物车、登录和注册未在同一行对齐。

当我尝试查看移动 View 时，出现失真

搜索栏和其他东西搞砸了

在移动 View 中，点击菜单折叠按钮没有任何反应。

这是我的代码:

  <div class = "navbar navbar-default navbar-fixed-top">
           <div class = "container">
              <div class ="navbar-header">
                <button type = "button" class = "navbar-toggle" data-toggle="collapse" data-target="hello.com">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button>
            <a href="index.php" class="navbar-brand"><img src="images/logo.jpg" height="60" width="200"></a>
        </div>
        <div class ="collapse navbar-collapse" id = "example">
            <ul class = "nav navbar-nav navbar-right">
                <li><a href="cart.php"><button type="button" class="btn btn-default btn-md navbar-btn">
        <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span><span class="badge"><?php echo count($_SESSION["cart_array"]); ?></span>
       </button></a>
                <li id="login"><a href="login.php" id="login1">Login</a></li>
                    <li id="login"><a href="signup.php" id="login1">Sign Up</a></li>
                    </ul>
                    <form action="index.php" class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type = "text" class="form-control" placeholder="search your phone" id ="search">
                </div>

                <button type="submit" class="bt btn-primary navbar-btn" >Submit</button>
            </form>
             </div>
            </div>
        </div>
    </div> 

Answer 1

您的代码中有几处错误。

working bootply

按钮标记 中的数据目标有误。它应该指向 id 而不是 link。它应该指向折叠 div 的 id，在这种情况下就是示例。

<button type = "button" class = "navbar-toggle" data-toggle="collapse" data-target="#example"> 

您正在分配图像的宽度和高度而不是这样做，使用 Bootstrap 类对您有利:img-responsive

 <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
           <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.php" class="navbar-brand">
              <img src="http://thewowstyle.com/wp-content/uploads/2015/05/the-best-wallpapers.jpg" class="img-responsive" style="height: 30px; margin-top: -5px;">
            </a>
          </div>
        <div class="collapse navbar-collapse" id="example">
            <ul class="nav navbar-nav navbar-right">
                <li>
                   <a href="cart.php">
                      <button type="button" class="btn btn-default btn-md navbar-btn">
                          <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
                          <span class="badge"><!--?php echo count($_SESSION["cart_array"]); ?--></span>
                      </button>
                  </a>
                </li>
                <li id="login">
                   <a href="login.php" id="login1">Login</a>   
                </li>
                <li id="login">
                   <a href="signup.php" id="login1">Sign Up</a>
                </li>
           </ul>
           <form action="index.php" class="navbar-form navbar-left" role="search">
               <div class="form-group">
                            <input type="text" class="form-control" placeholder="search your phone" id="search">
                </div>
                <button type="submit" class="bt btn-primary navbar-btn">Submit</button>
          </form>
      </div>
     </div>
</div>