Bootstrap 3导航搜索（响应问题）

Question

我在这里举了一个例子，说明我在哪里：  （http://www.bootply.com/starfox221/8H14cVMlkq#）

不幸的是，当它缩小到不同大小时，我失去了使其响应的能力。有人可以帮助我保留相同的功能，但也允许它也有响应吗？

感谢一堆。

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>

                <span class="icon-bar"></span> <span class="icon-bar"></span>

          </button> <div class="navbar-brand">PetLuvers <i class="fa fa-heart"></i></div>

        </div>

            <div class="navbar-form navbar-right btn-group copernicus">
              <a class="murph" href="#myModal" data-toggle="modal">Login</a>&nbsp;
                 <a class="murph" href="#">Register</a>&nbsp;
                  <a class="murph" href="#">Help</a>&nbsp;
            </div>

     <div class="search">
          <form class="form-inline" role="form">
    <div class="form-group nested-group">
        <input type="text" placeholder="What are you looking for?" id="left-input" class="form-control left">
        <input type="text" placeholder="Zip Code" id="middle-input" class="form-control right">
        <button class="btn btn-primary" type="button">Go!</button>
    </div>
</form>
          </div>





          </div>
          </nav>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title" id="myModalLabel">Hey! Welcome back!</h4>
                    </div>
                <div class="modal-body">


    <div class="main">

      <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6">
          <a href="#" class="btn btn-lg btn-primary btn-block">Facebook</a>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6">
          <a href="#" class="btn btn-lg btn-danger btn-block">Google</a>
        </div>
      </div>
      <div class="login-or">
        <hr class="hr-or">
        <span class="span-or">or</span>
      </div>

      <form role="form">
        <div class="form-group">
          <label for="inputUsernameEmail">Username or email</label>
          <input type="text" class="form-control" id="inputUsernameEmail">
        </div>
        <div class="form-group">
          <a class="pull-right" href="#">Forgot password?</a>
          <label for="inputPassword">Password</label>
          <input type="password" class="form-control" id="inputPassword">
        </div>
        <div class="checkbox pull-right">
          <label>
            <input type="checkbox">
            Remember me </label>
        </div>
        <button type="submit" class="btn btn btn-primary">
          Log In
        </button>
        <br>
       <div class="login-orange">

        <span class="span-orange">Not A PetLuver Yet? Sign up!</span>
      </div>
      </form>

    </div>


</div>

                </div>
                <div class="modal-footer">
                    <center>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close!</button>
                    </center>
                </div>
            </div>
        </div>

CSS：

@import url(http://fonts.googleapis.com/css?family=Raleway);
.navbar-default {
background-color: #186581;
border-color: #e7e7e7;
}

.navbar-default .navbar-brand {
color: #FFF;
font-weight: bold;
font-family: 'Raleway', sans-serif;  
}

.navbar>.container .navbar-brand {
margin-left: 150px;
}

.navbar-default .navbar-nav>li>a {
color: #FFFDFD;
}

.btn {

font-size: 14px;
font-weight: bold;
font-family: 'Raleway', sans-serif;  
text-transform: Uppercase;

}

.fa-heart {
     color: rgb(236, 139, 156);
}

.modal-footer {
padding: 19px 20px 20px;
margin-top: 0px;
text-align: right;
border-top: 0px solid #e5e5e5;
}

.modal-body {
position: relative;
padding: 10px 20px 0px 20px;
}

.modal-title {
margin: 0;
line-height: 1.428571429;
font-family: 'Raleway', sans-serif; 
font-weight: Bold;
}


.modal-dialog {
width: 300px !important;
margin: 65px auto;
}


  .nested-group input:focus {
        box-shadow: none;
    }

    .nested-group input:first-child {
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .nested-group input {
        margin-left: -5px;
        border-radius: 0px;
    }

    .nested-group  button {
        margin-left: -10px;
        border-left: none;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

.search {
 width: 450px; margin: 10px auto; position relative; 
}

  .left {
     width: 292px;
    }

.right {
   width: 120px;
  }

    .main {
    max-width: 320px;
    margin: 20px auto;
  }
  .login-or {
    position: relative;
    font-size: 18px;
    color: #aaa;
    margin-top: 10px;
            margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .span-or {
    display: block;
    position: absolute;
    left: 50%;
    top: -2px;
    margin-left: -25px;
    background-color: #fff;
    width: 50px;
    text-align: center;
  }
 .span-orange {
    display: block;
    position: absolute;
    left: 30px;
    top: -2px;
    margin-left: -25px;
    background-color: #fff;
    width: 250px;
    text-align: center;
  }

   .login-orange {
    position: relative;
    font-size: 14px;
    color: #aaa;
    margin-top: 10px;
            margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .hr-or {
    background-color: #cdcdcd;
    height: 1px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  h3 {
    text-align: center;
    line-height: 300%;
  }
  .login-or {
    position: relative;
    font-size: 18px;
    color: #aaa;
    margin-top: 10px;
            margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .span-or {
    display: block;
    position: absolute;
    left: 50%;
    top: -2px;
    margin-left: -25px;
    background-color: #fff;
    width: 50px;
    text-align: center;
  }
  .hr-or {
    background-color: #cdcdcd;
    height: 1px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
 .signup {
    text-align: center;
    line-height: 300%;
  }

.copernicus {
  font-size: 14px;
font-weight: bold;
font-family: 'Raleway', sans-serif;  
text-transform: Uppercase;
    color: #FFF;
    margin-top: 15px;
    margin-right: 10%;

  }

  a.murph:link {
  font-size: 14px;
font-weight: bold;
font-family: 'Raleway', sans-serif;  
text-transform: Uppercase;
    color: #FFF;
    word-spacing: 36px;
       -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
  }

    a.murph:hover {
  font-size: 14px;
font-weight: bold;
font-family: 'Raleway', sans-serif;  
text-transform: Uppercase;
    color: #A7ADB2;
    word-spacing: 36px;
      text-decoration: none;
  }