如何使输入组响应(搜索和下拉)

Question

我有以下小提琴,它适用于台式机.但是我想让它具有响应性,这样在移动设备上主要类别和第二类别低于搜索输入文本.我该怎么办？

我知道我可以使用媒体查询来使事情响应,但我不知道如何在屏幕尺寸低于600px的新行上制作"输入组按钮".最简单的方法是什么？

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

}

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