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中：

Bootply ：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>

Answer 2

默认情况下，输入的宽度设置为100％，因此换行是由提交按钮引起的。解决此问题的一种方法是使用input group，这将允许您将按钮元素与输入内联。

使用以下标记替换您的表单：

<强> HTML：

      <form class="navform">
        <div class="input-group">            
          <input type="text" class="form-control" placeholder="Search">
          <span class="input-group-btn">
            <button class="btn btn-info" type="button"><span class="glyphicon glyphicon-search"></span> Submit</button>
          </span>
        </div>
      </form>

我还添加了一个navform类，使表单与默认导航栏的高度相同，并添加了填充以使输入与导航栏的中间对齐。

<强> CSS：

.navform {
    height: 50px;
    padding-top: 8px;
}

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

2 个答案: