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

【问题标题】：Styling row of divs and bootstrap input group设置 div 行和引导输入组的样式
【发布时间】：2016-03-29 10:39:23
【问题描述】：

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

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

【问题讨论】：

第一个问题从 div 中删除 input-group 类
我不明白第二个问题..但是我测试了firefox和chrome，效果很好，检查下面的代码sn-p..
哦，太好了！多谢。你能把我链接到解释为什么它以形式而不是 div 工作的东西吗？另外我的第二个问题的意思是，例如，如果我将底部搜索栏设置为 50px 高度，搜索框设置为 30px，然后尝试在顶部和底部放置 10px 边距，搜索栏始终位于屏幕底部，不不管我做什么。
对于第一个问题，当您将“input-group”保留为 div 时，它会变成块容器并保留整行。所以不要将容器作为输入组...
对于第二个问题，可能有很多原因，所以您能否提供您遇到的问题..（代码）以便我检查..

标签： css twitter-bootstrap row styling col

【解决方案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>

【讨论】：