html - 如何在导航栏响应中制作具有自定义宽度的表单？

Question

bootstrap 很新，只是在玩弄一些不同的 UI 想法。我的导航栏中具有自定义宽度的表单是无响应的，但导航栏本身是响应的。我尝试过各种崩溃类，但似乎没有任何效果。我相信这是因为我已经对表单的宽度进行了硬编码，但我不确定如何在不这样做的情况下达到所需的宽度。

https://codepen.io/ayeteo/pen/VWOQXY

HTML

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
  <div class="col-md-12">
    <ul class="largenav pull-right">
      <li class="upper-links"><a class="links" 
href="http://clashhacks.in/">Home</a></li>
      <li class="upper-links"><a class="links" 
href="http://clashhacks.in/">Account</a></li>
      <li class="upper-links"><a class="links" 
href="http://clashhacks.in/">Cart</a></li>
      <li class="upper-links"><a class="links" href="http://clashhacks.in/">Help</a></li>
      <a href="#"><i id="bell"class="fa fa-bell fa-1x" aria-hidden="true"></i></a>

  </div>
</div>

<a href="#" class="navbar-brand">SHOPGIANT</a>
<form class="navbar-form navbar-center" role="search">
  <div class="form-group">
    <input type="text" class="form-control input-large" placeholder="Find brands, products, and items" id="navBarSearch">
  </div>
  <button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button>
</form>

CSS

Answer 1

这里是解决方案 https://codepen.io/Shiladitya/pen/qjGJwW

body{
    background:url('http://www.wallpaperup.com/uploads/wallpapers/2012/10/21/20181/cad2441dd3252cf53f12154412286ba0.jpg');
    padding:50px;
}
.navbar{
  margin: 50px;
  padding-bottom:10px;
} 

#bell {
  margin-right:50px;
  color: white;
}

.form-group{
  width: calc(100% - 55px);
  display: inline-block;
}

#navBarSearch{
  width: 100%;
}
.btn{
  width:50px;
  margin-left: -5px;
  height: 34px;
}

.links{
  color: white;
}
.upper-links {
  display: inline-block;
  padding: 0 11px;
}

.navbar-brand{
  color: white !important;
  font-size:30px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-inverse">
  <div class="container-fluid">


    <div class="row ">
      <div class="col-md-12">
        <ul class="largenav pull-right">
          <li class="upper-links"><a class="links" href="http://clashhacks.in/">Home</a></li>
          <li class="upper-links"><a class="links" href="http://clashhacks.in/">Account</a></li>
<li class="upper-links"><a class="links" href="http://clashhacks.in/">Cart</a></li>
<li class="upper-links"><a class="links" href="http://clashhacks.in/">Help</a></li>
          <a href="#"><i id="bell"class="fa fa-bell fa-1x" aria-hidden="true"></i></a>

      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <a href="#" class="navbar-brand">SHOPGIANT</a>
      </div>
      <div class="col-md-9">
        <form class="navbar-form navbar-center" role="search">
          <div class="form-group">
            <input type="text" class="form-control input-large" placeholder="Find brands, products, and items" id="navBarSearch">
          </div>
          <button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button>
          </div>
      </div>
    </form>
  </div>
</nav>

我想这就是您要找的。