Question

我有以下fiddle，它适用于桌面。但是我想让它具有响应性，这样在移动设备上主要类别和第二类别低于搜索输入文本。我该怎么办？

我知道我可以使用媒体查询来使事情响应，但我不知道如何在屏幕尺寸低于600px的新行上制作'input-group-button'。最简单的方法是什么？

<div class="input-group">
          <input type="text" class="form-control search-query" placeholder="Masukkan produk yang kamu cari disini">
          <div class="input-group-btn" data-toggle="tooltip" data-trigger="manual" data-placement="top" title="Pilih kategori utama pencarian">
            <button type="button" class="btn btn-default dropdown-toggle top-category-label" data-toggle="dropdown"> Main Category <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right top-category">

            </ul>
          </div>
          <div class="input-group-btn" data-toggle="tooltip" data-trigger="manual" data-placement="bottom" title="Pilih kategori kedua pencarian">
            <button type="button" class="btn btn-default dropdown-toggle first-level-label" data-toggle="dropdown"> Second Category <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right first-level-category">

            </ul>
          </div>
        </div>

Answer 1

只使用mediaqueries

@media (min-width: 1100px) {
  /*code for destop*/
}
@media (max-width: 1100px) {
/*code for ipad and netbooks*/
 }
@media (max-width: 480px) {
/*code for mobile here*/

}

如果您使用的是BS3

@media(max-width:767px){

}
@media(min-width:768px){

}
@media(min-width:992px){

}
@media(min-width:1200px){

}

UPDATED Demo in Jsfiddle

在你的情况下，它会是这样的：

@media (max-width: 480px) {
  body {
    background: #f95e8a;
  }
.input-group-addon, .input-group-btn, .input-group .form-control {
    display: block;
    margin-bottom: 10px;
    clear: both;
    }
.input-group {
    display: block;
    }
}

Answer 2

除了上述内容，您还需要覆盖Boostrap css的这一部分：

.input-group-addon, .input-group-btn {
     width: 1%;
     white-space: nowrap;
     vertical-align: middle;
 }

将成为：

 @media (max-width: 480px) {
    .input-group-addon {
       width: 100%;
       box-sizing: content-box;
       white-space: pre-line;
   }
 }

您还必须将最大宽度100％和box-sizing：content-box添加到.input-group，并添加适合您表单的任何填充。

如何使输入组响应（搜索和下拉）

2 个答案: