如何使这个搜索栏在 Bootstrap 中响应？答案

【问题标题】：How to make this search bar responsive in Bootstrap?如何使这个搜索栏在 Bootstrap 中响应？
【发布时间】：2016-10-14 20:40:04
【问题描述】：

我正在寻找一种方法来使这个搜索栏的输入和按钮响应。但是我被 Bootstrap 属性卡住了，当我缩小窗口时，一切都非常糟糕，我只是不知道如何应用一些更好的类和道具。这是codepen链接：http://codepen.io/anon/pen/WGKOmB

感谢所有建议

这是我的html：

.row {
  background-color: blue;
  padding: 40px 30px;
}
.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
div.form-group.checkbox {
  width: 207px;
  background-color: white;
  padding: 5px 10px;
}
select.form-control {
  width: 173px;
}
input.form-control.choice-input {
  /*.choice input input*/
  width: 360px;
  height: 38px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="row">
      <!-- row -->

      <div class="col-md-8 col-sm-6" style="background-color: lightblue; height: 74px;">
        <p>Lorem ipsum</p>
        <div class="form-inline">
          <div class="form-group checkbox">
            <span><input type="checkbox" value="" checked></span>
            <label>Lorem</label>
            <span><input type="checkbox" value=""></span>
            <label>Ipsum</label>
          </div>
          <div class="form-group">
            <select class="form-control">
              <option value="one">Lorem ipsum</option>
              <option value="two">Two</option>
              <option value="three">Three</option>
              <option value="four">Four</option>
              <option value="five">Five</option>
            </select>
          </div>
          <div class="form-group">
            <input class="form-control choice-input" type="text" placeholder="Placeholder text">
          </div>
        </div>
        <!-- end form-inline -->
      </div>
      <div class="col-md-4 col-sm-6" style="background-color: lightgreen; height: 74px;">

        <p class="pull-right">Lorem ipsum</p>
        <div class="btn-group">
          <button class="btn btn-default" style="margin-right: 10px">Lorem ipsum lorem</button>
          <button class="btn btn-default">Lorem lorem lorem</button>
        </div>

      </div>

    </div>
  </div>
  <!-- end row -->
  </div>
</body>

【问题讨论】：

您可以使用媒体查询来实现您想要的。在你的 Css 中： \@media (width: 60em) { /* Breite entspricht genau 60em / } \@media (min-width: 50em) { / Breite beträgt mindestens 50em / } \ @media (max-width: 70em) { / Breite beträgt höchstens 70em */ } 我还建议不要覆盖 twitters 引导类（就像你对“.row”填充设置所做的那样）。一般来说：停止混合内联样式和类。那很混乱。你想达到什么目标，如果你再描述一下，也许我们可以提供帮助......
对不起，我不懂德语中的属性..我想要实现的是在调整窗口大小时使每个元素（复选框、选择框、输入字段和按钮）相互堆叠

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

智者（不是我）的话，永远不要使用内联样式。始终将所有内容都放在 CSS 中。此外，您为蓝色框和浅绿色框设置了特定高度。因此，即使浏览器较窄并且处于 col-sm-* 和 col-xs-* 区域，您仍然可以设置高度。你应该给一个类名，例如 form-height，然后在 CSS 中写下如下内容：

.form-height {
    height: 150px; /* Or whatever height you find appropriate */
}
@media (min-width:768px) {
    .form-height {
        height: 74px;
    }
}

这意味着当浏览器小于 768px 时，即当它被 bootstrap 认为是 col-xs-* 时，它应该有一定的高度。当它更大时，它将具有不同的高度。

但是，更好的解决方案是永远不要使用 height 属性。你这样做的原因可能是因为你想要一个特定的填充。因此，您可以为该类编写以下 CSS：

.form-height {
    padding: 10px 0px; /* Give the top and bottom 10px of padding and nothing to the right or left */
}

【讨论】：

【解决方案2】：

试试这个代码

<div class="container">
<form class="form-inline" style="padding: 20px 0;">
    <div class="row">   
        <div class="col-sm-8 col-md-9">
            <div class="form-group">
                <label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
                <label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
            </div>
            <div class="form-group">
                <select class="form-control" id="sel1">
                    <option>Option 1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="usr" placeholder="Placeholder">
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <button type="button" class="btn btn-default">Default</button>
            <button type="button" class="btn btn-success">Success</button>
        </div>
    </div>
</form>

在这里演示：https://jsfiddle.net/adb0br5e/1/

【讨论】：