Question

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

我的第一个问题是我的列没有出现在同一行上。我让它们在所有屏幕尺寸上都以3,6和3的尺寸打破，但第二个div从未出现在第一个屏幕旁边。您可以在此处查看示例：broken div 我突出显示带有白色边框的div，以便于查看。（无论我是否只有文本输入或带有按钮的输入 - 我选择稍后使用它）也是如此。

我的第二个问题是，在尝试设置栏的布局时，当我在Mozilla中测试时，我的搜索框不会移动到正确的位置。它works in我的小提琴测试，但这完全不是我浏览器中的样子。我已经尝试了许多常用的解决方案，但到目前为止还没有任何工作。

<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输入组

1 个答案: