div 和 bootstrap 输入组的样式行

Question

我想在页面底部制作一个固定的搜索栏。我希望将搜索栏（行）分为三个部分 - 1) 实际的搜索输入框，(2) 中间的 div 将是一个显示框，以及 (3) 折叠的高级菜单。

我的第一个问题是我的列没有出现在同一行上。我让它们在所有屏幕尺寸下都以 3、6 和 3 的尺寸损坏，但第二个 div 从未出现在第一个旁边。你可以在这里看到一个例子：broken div 我用白色边框突出显示了 divs，以便于查看。（无论我只有文本输入还是带有按钮的输入都是如此 - 我选择稍后使用）

我的第二个问题是，在尝试设置栏的布局时，当我在 Mozilla 中测试时，我的搜索框不会移动到正确的位置。它 works in 我的 fiddle 测试但这根本不是我浏览器中的样子。我已经尝试过许多常见的解决方案，但到目前为止没有任何效果。

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

编辑以显示 css

#card-search-controls{
height: 50px;
margin-left: 0px;
position: fixed;
bottom: 0;
right: 0;
left: 0;
background: rgba(6,25,51, 0.8);
z-index: 1;
display: flex;
}
.input-group{
  margin-top: 10px;
  margin-bottom: 10px;
  height: 20px;
  margin-left: 0px;
}

#card-search-controls div{
border: 1px solid white;
}

.search-results{
margin-top: 10px;
}

Answer 1

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

<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 和 bootstrap 输入组的样式行

Styling row of divs and bootstrap input group

css

row

col

styling

twitter-bootstrap