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

我们可以在额外的小设备上使用两列来实现这一点。

我将表单包裹在container div中。
我添加了一行，其中包含两列大小为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>

内联表单＆gt;＆gt;移动分辨率的水平表单

1 个答案: