Question

我正在寻找一种方法来使这个搜索栏的输入和按钮响应。然而，我陷入了Bootstrap属性，当我缩小窗口时，所有内容都非常糟糕，我只是无法弄清楚如何应用更好的类和道具。这是代码链接：http://codepen.io/anon/pen/WGKOmB

感谢所有建议

这是我的HTML：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 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 */
}

Answer 2

试试此代码

org.eclipse.e4.ui.internal.workbench.PartServiceSaveHandler

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

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

2 个答案: