css - Bootstrap 根据屏幕尺寸自动调整

Question

我使用 Bootstrap 3 创建网页设计界面。如果以大屏幕尺寸显示，它看起来像这样:

但是，如果它以小屏幕尺寸显示，它看起来像这样:

当它以小屏幕尺寸显示时我遇到了问题。我在其中所做的脚本 Bootply不兼容小尺寸。

Answer 1

您需要将 label 标签与 input 标签放在同一列中。

DEMO

<div class="row">
  <div class="col-md-3">
    <label>Label1</label>
    <input type="text" class="form-control" value="text1">
  </div>
  <div class="col-md-3">
    <label>Label2</label>
    <input type="text" class="form-control" value="text2">
  </div>
  <div class="col-md-3">
    <label>Label3</label>
    <input type="text" class="form-control" value="text3">
  </div>
  <div class="col-md-3">
    <label>Label4</label>
    <input type="text" class="form-control" value="text4">
  </div>
</div>