css - Bootstrap 3 导航栏中的流体调整大小输入

Question

我希望 Bootstrap 导航栏中的输入具有可能的最大宽度，而不会破坏单行设计和折叠时的移动切换。

col-sm-* 正在处理按钮而不是输入。我试图避免 flex-box 并尽可能坚持使用预先存在的 Boostrap 类。

---

<nav class="navbar" role="navigation">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2">
        <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>
          <a class="navbar-brand" href="#"><em>FirstShop.com</em></a>
        </div>
      </div>
      <div class="col-sm-10">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <form action="">
            <div class="form-group">                                
              <input type="text" class="form-control col-sm-5">
              <button type="submit" class="btn btn-default col-sm-1">Submit</button>                                
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</nav>

Also prepared a live demo here.

Answer 1

您可以将输入包装在特定大小的 div 中:

引导:http://www.bootply.com/UmwelBa4tU

HTML:

  <form action="" class="">
    <div class="row">           
      <div class="col-sm-5">
        <input type="text" class="form-control ">              
      </div>    

      <button type="submit" class="btn btn-default col-sm-1">Submit</button>                                
    </div>
  </form>