Css 设置div行和引导输入组的样式

我试图在页面底部创建一个固定的搜索栏。我希望搜索栏（行）分为三部分-1）实际搜索输入框，（2）中间的div将是一个显示框和（3）一个折叠的高级菜单

我的第一个问题是，我的列不显示在同一行上。我把它们分为3、6和3三种屏幕大小，但第二个div从未出现在第一个div的旁边。您可以在此处看到一个示例： 我用白色边框突出显示了div，以便于查看。（无论我的输入是文本输入还是带有按钮的输入，情况都是如此——我后来选择使用该按钮）

我的第二个问题是，当我在Mozilla中测试搜索框时，在尝试设置搜索框布局时，搜索框无法移动到正确的位置。这是我的小提琴测试，但这根本不是我的浏览器中的样子。我已经尝试了许多常用的解决方案，但迄今为止没有任何效果

<div id="card-search-controls" class="row">
<div class="input-group col-md-3 col-sm-3 col-lg-3">
    <input type="text" id="searchbox" class="form-control" value="Search for..." ng-model="searchFilterInput" autofocus>
    <span class="input-group-btn"><button class="btn btn-default" type="button">+</button></span>
</div>
<div class="search-results col-md-6 col-sm-6 col-lg-6">TEST TEXT</div>
<div class="adv-menu col-md-3 col-sm-3 col-lg-3">####</div>
</div>

---

请检查此代码。我已将输入组添加到单独的表单标记中，并包装了输入字段

<div class="container">
    <div id="card-search-controls" class="row">
    <div class="col-md-3 col-sm-3 col-lg-3 col-xs-3">
      <form class="input-group">
        <input type="text" id="searchbox" class="form-control" value="Search for..." ng-model="searchFilterInput" autofocus="" />       
      <span class="input-group-btn">
          <button class="btn btn-default" type="button">+</button>
        </span>
      </form>

    </div>
    <div class="search-results col-md-6 col-sm-6 col-lg-6 col-xs-6">TEST TEXT</div>
    <div class="adv-menu col-md-3 col-sm-3 col-lg-3 col-xs-3">######</div>
  </div>
</div>

+
测试文本
######

对于第一个问题，请从div中删除输入组类。我不理解第二个问题。但是我测试了firefox和chrome，工作正常。请检查下面的代码片段。太好了！非常感谢。你能把我和一些东西联系起来，解释为什么它在form中工作，而不是div吗？第二个问题的意思是，例如，如果我将底部搜索栏的高度设为50px，搜索框的高度设为30px，然后尝试在顶部和底部设置10px的边距，无论我做什么，搜索栏始终位于屏幕底部。对于第一个问题，当您保持“输入组”时对于div，它将变成块容器并保留整行。因此，不要将容器作为输入组…对于第二个问题，可能有很多原因，因此您可以向我提供您面临的问题…（代码），以便我可以检查。。

<div class="container">
    <div id="card-search-controls" class="row">
    <div class="col-md-3 col-sm-3 col-lg-3 col-xs-3">
      <form class="input-group">
        <input type="text" id="searchbox" class="form-control" value="Search for..." ng-model="searchFilterInput" autofocus="" />       
      <span class="input-group-btn">
          <button class="btn btn-default" type="button">+</button>
        </span>
      </form>

    </div>
    <div class="search-results col-md-6 col-sm-6 col-lg-6 col-xs-6">TEST TEXT</div>
    <div class="adv-menu col-md-3 col-sm-3 col-lg-3 col-xs-3">######</div>
  </div>
</div>