推特引导 - 内联表单 >> 移动分辨率的水平表单

Question

我想有两个内联的桌面分辨率的表单元素，但在电话分辨率，它真的搞砸了外观。如果检测到电话分辨率，是否有一种简单的方法可以将下面的代码脱离内联并堆叠起来?

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Answer 1

我们可以在更小的设备上使用两列。

我将表单包装在containerdiv中。
我添加了一行和两列，大小为6，用于特别小的设备。
我添加了我的自定义类btn-sm-block按钮，以使其在小型设备的全宽。

@media all and (max-width:768px) {
    .btn-sm-block {
        width: 100%;
        display:block;
    }
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <form class="form-inline">
        <div class="row">
            <div class="form-group col-xs-6">
                <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                    <div class="input-group-addon">.00</div>
                </div>
            </div>
            <div class="form-group col-xs-6">
                <button type="submit" class="btn btn-primary btn-sm-block">Transfer cash</button>
            </div>
        </div>
    </form>
</div>