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

Posted 2023-03-06

【中文标题】如何在移动视图上使输入和按钮堆栈相互叠加

【英文标题】：How to make input and button stack on top of each others on mobile view

【发布时间】：2017-05-15 23:34:11

【问题描述】：

我有以下代码：

<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 作为选择元素。

【问题讨论】：

猜你需要在这里使用列类，但由于某种原因我无法使它们工作。

input-group with input field, select (silviomoreto) and button not displaying correctly的可能重复

【参考方案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>

【讨论】：

@PraveenKumar 有时这东西是个谜 :)

是的，没错，你的代码和我的几乎没有区别。