如何将窗口调整为较小的搜索条置于导航栏底部并防止其大小调整？

Question

我尝试使用Bootstrap在页脚上实现搜索栏。当窗口最大化时，搜索栏似乎正确显示。但是，当我尝试将窗口调整为较小时，搜索窗体会变宽，底部导航栏的高度会增加，如下图所示：

我想要的是导航栏高度保持不变。搜索栏的长度也不应扩大。基本上，即使窗口较小，导航栏也应如下所示：

我用于生成底部导航栏的HTML代码如下所示：

<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
  <form class="navbar-form navbar-left">
    <div class="input-group">
      <input type="text" class="form-control" name="gpsForm" placeholder="Latitude, Longitude">
      <div class="input-group-btn">
        <button type="submit" class="btn btn-default">
          <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
          Search
        </button>
        <button type="submit" class="btn btn-primary">
          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
          Add
        </button>
      </div>
    </div>
  </form>
</div>

任何帮助都会非常感激，因为我对Bootstrap和Web开发一般都很陌生，而且我一直试图寻找这个问题的解决方案几个小时而没有任何运气。< / p>

Answer 1

<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
  <form role="form">
    <div class="input-group">
      <input type="text" class="form-control" name="gpsForm" placeholder="Latitude, Longitude">
      <div class="input-group-btn">
        <button type="submit" class="btn btn-default">
          <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
          Search
        </button>
        <button type="submit" class="btn btn-primary">
          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
          Add
        </button>
      </div>
    </div>
  </form>
</div>

工作小提琴 http://jsfiddle.net/52VtD/9093/

现在您可以根据需要添加样式，如填充和边距：）

Answer 2

尝试从表单中删除＆＃34; navbar-form＆＃34; 类，然后重试。

而不是这个

form class="navbar-form navbar-left"

尝试

form class="navbar-left"