如何在移动视图上使输入和按钮堆栈相互叠加

Question

我有以下代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container text-center">
  <div class="form-group input-group">
    <span class="input-group-btn form-group">
      <select name="huge" class="selectpicker" data-style="btn-default btn-fill btn-block">
        <option disabled> Search in...</option>
        <option value="1" selected>Songs </option>
        <option value="1">Bands</option>
        <option value="1">Drummers</option>
        <option value="1">Time Signatures</option>
      </select>
    </span>
    <input type="text" class="form-control form-group">
    <span class="input-group-btn form-group">
      <button class="btn btn-info btn-fill search-button" type="button">Search</button>
    </span>
  </div>
</div>

我希望在移动视图上将不同的元素堆叠在一起。现在，搜索栏缩小并在低分辨率下变得不可见。

在移动视图中如何使 3 个元素堆叠在一起？

PS：我使用bootstrap-select 作为选择元素。

Answer 1

我认为您必须删除 form-group 结构并改用一行：

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}
.input-block-level {
  display: inline-block;
  width: 100%;
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row nopadding">
  <div class="nopadding col-xs-12 col-sm-4">
    <select name="huge" class="form-control input-block-level" data-style="btn-default btn-fill btn-block">
      <option disabled>Search in...</option>
      <option value="1" selected>Songs</option>
      <option value="1">Bands</option>
      <option value="1">Drummers</option>
      <option value="1">Time Signatures</option>
    </select>
  </div>
  <div class="nopadding col-xs-12 col-sm-4">
    <input type="text" class="form-control input-block-level">
  </div>
  <div class="nopadding col-xs-12 col-sm-4">
    <button class="btn btn-info btn-fill search-button input-block-level" type="button">Search</button>
  </div>
</div>