响应导航错误

Question

我正在使用引导程序。我需要做出响应，但我无法处理它。特别搜索栏让我很沮丧。

我想菜单元素折叠在992px下。等待建议。谢谢。

CodePen Link

例如代码：

nav.navbar-default { 
 
    background-color: #232323; 
 
    margin-right: 1px; 
 
    border: 0; 
 
} 
 
div.navbar-wrapper { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 20; 
 
} 
 
div.navbar-wrapper .container { 
 
    padding: 0; 
 
} 
 
div.navbar-wrapper .col { 
 
    padding: 0; 
 
} 
 
div.navbar-wrapper .col:first-child { 
 
    padding-right: 30px; 
 
} 
 
div.navbar-wrapper .menu-middle { 
 
    width: 64.66667%; 
 
} 
 
div.navbar-wrapper .menu-right { 
 
    width: 10.33333%; 
 
} 
 
div.navbar-wrapper .logo { 
 
    background: url(/assets/img/logo.png) center no-repeat; 
 
    background-color: #3d3d3d; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    height: 134px; 
 
} 
 
div.navbar-wrapper .logo.navbar-brand { 
 
    margin-left: 0; 
 
} 
 
div.navbar-wrapper .logo:hover { 
 
    background-color: #3d3d3d; 
 
} 
 
div.navbar-wrapper .logo span.brand-name { 
 
    position: absolute; 
 
} 
 
div.navbar-wrapper .nav-wrap .top-nav { 
 
    height: 36px; 
 
    width: 100%; 
 
    display: block; 
 
} 
 
div.navbar-wrapper .nav-wrap .top-nav > li > a { 
 
    font-size: 12px; 
 
    color: #fff; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 
div.navbar-wrapper .nav-wrap .top-nav > li > a:hover { 
 
    color: #999; 
 
} 
 
div.navbar-wrapper .nav-wrap .top-nav > li > a .fa { 
 
    padding-right: 5px; 
 
} 
 
div.navbar-wrapper .nav-wrap .top-nav .dropdown { 
 
    background-color: #555555; 
 
    margin-right: 2.2px; 
 
} 
 
div.navbar-wrapper .nav-wrap .top-nav .navbar-form { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .form-control, 
 
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .btn-default { 
 
    background-color: #555555; 
 
    border: none; 
 
    -webkit-border-radius: 0; 
 
    border-radius: 0; 
 
    padding: 20px 32px; 
 
    color: #fff; 
 
    font-size: 14px; 
 
} 
 
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .form-control:focus, 
 
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .btn-default:focus { 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
} 
 
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .btn-default { 
 
    padding: 9px; 
 
    font-size: 16px; 
 
    outline: 0; 
 
} 
 
div.navbar-wrapper .nav-wrap .main-nav { 
 
    width: 100%; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: start; 
 
    -webkit-justify-content: flex-start; 
 
    -ms-flex-pack: start; 
 
    justify-content: flex-start; 
 
    padding: 24px 0 24px 15px; 
 
} 
 
div.navbar-wrapper .nav-wrap .main-nav > li > a { 
 
    font-size: 14px; 
 
    font-weight: 700; 
 
    color: #fff; 
 
    -webkit-transition: all .3s ease-in-out; 
 
    transition: all .3s ease-in-out; 
 
    padding-left: 22px; 
 
    padding-right: 22px; 
 
} 
 
div.navbar-wrapper .nav-wrap .main-nav > li > a:hover { 
 
    background-color: #00a9df; 
 
} 
 
div.navbar-wrapper .nav-wrap .main-nav > li.active a { 
 
    background-color: #00a9df; 
 
} 
 
div.navbar-wrapper .nav-wrap .main-nav > li.active a:hover, 
 
div.navbar-wrapper .nav-wrap .main-nav > li.active a:focus { 
 
    color: #fff; 
 
} 
 
div.navbar-wrapper .my-cart-wrap { 
 
    background-color: #ff9c00; 
 
    min-height: 100%; 
 
    height: 134px; 
 
    display: table; 
 
} 
 
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap { 
 
    display: table-cell; 
 
    height: 100%; 
 
    text-align: center; 
 
    color: #fff; 
 
    vertical-align: middle; 
 
} 
 
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap a { 
 
    color: #fff; 
 
} 
 
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap a:hover { 
 
    text-decoration: underline; 
 
} 
 
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap .fa-shopping-cart { 
 
    font-size: 18px; 
 
} 
 
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap span.my-cart { 
 
    font-size: 14px; 
 
} 
 
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap span.cart-item { 
 
    font-size: 12px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<!-- NAVBAR --> 
 
<div class="navbar-wrapper"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <nav class="navbar navbar-default navbar-static-top"> 
 
      <div class="container navbar-wrap"> 
 
      <div class="navbar-header col col-md-3"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand logo" href="#"><span class="brand-name">Project name</span></a> 
 
      </div> 
 

 
      <div class="col col-md-8 menu-middle"> 
 

 
       <div id="navbar" class="navbar-collapse collapse nav-wrap"> 
 
       <ul class="nav navbar-nav top-nav"> 
 
        <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>My Account</a> 
 
        </li> 
 
        <li><a href="#"><i class="fa fa-heart" aria-hidden="true"></i>My Wishlist</a> 
 
        </li> 
 
        <li><a href="#"><i class="fa fa-external-link" aria-hidden="true"></i>Checkout</a> 
 
        </li> 
 
        <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">USD <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">TL</a> 
 
         </li> 
 
         <li><a href="#">EURO</a> 
 
         </li> 
 
        </ul> 
 
        </li> 
 

 
        <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Turkish<span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">English</a> 
 
         </li> 
 
        </ul> 
 
        </li> 
 
        <div class="input-group nav-search-bar"> 
 
        <form class="navbar-form"> 
 
         <input type="text" class="form-control" placeholder="Enter your keyword"> 
 
         <span class="input-group-btn"> 
 
            <button class="btn btn-default" type="button"><i class="fa fa-search" aria-hidden="true"></i></button> 
 
            </span> 
 
        </form> 
 
        </div> 
 
       </ul> 
 
       <ul class="nav navbar-nav main-nav text-uppercase"> 
 
        <li class="active"><a href="">Home</a> 
 
        </li> 
 
        <li><a href="">Living Room</a> 
 
        </li> 
 
        <li><a href="">Bedroom</a> 
 
        </li> 
 
        <li><a href="">Dinning</a> 
 
        </li> 
 
        <li><a href="">Blog</a> 
 
        </li> 
 
        <li><a href="">Contact Us</a> 
 
        </li> 
 
       </ul> 
 
       </div> 
 
       <!--/.nav-collapse --> 
 
      </div> 
 
      <div class="my-cart-wrap col col-sm-1 menu-right"> 
 
       <div class="shopping-cart-wrap"> 
 
       <a href="#"> 
 
        <i class="fa fa-shopping-cart" aria-hidden="true"></i> 
 
        <br> 
 
        <span class="my-cart">My Cart</span> 
 
        <br> 
 
        <span class="cart-item">0 Item</span> 
 
       </a> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </nav> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

实施例：

Answer 1

使用此代码为搜索栏。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div class="input-group"> 
 
    <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> 
 
    <span class="input-group-addon" id="basic-addon2">@example.com</span> 
 
</div>