Bootstrap根据屏幕尺寸自动调整

Question

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

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

当它以小屏幕尺寸显示时，我遇到了问题。我完成的剧本 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>