2

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

我的第一个问题是我的列没有出现在同一行。我在所有屏幕尺寸下都将它们分成 3、6 和 3 的尺寸，但第二个 div 永远不会出现在第一个 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>

编辑以显示 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;
}
4

1 回答 1

0

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

<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>
于 2015-12-23T03:49:41.593 回答