如何使用@media在输入上方设置标签？

Question

我有一个简单的Bootstrap块，如下所示：

主要问题出现在较小的分辨率上，如1280 * 600：

你可以看到没有看到ip的mos，所以我想在这些输入上方设置labes：

<div class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-3 control-label" for="textinput" style="text-align:center">Server IP</label>
        <div class="col-sm-4">
            <input type="text" placeholder="Enter IP Address" class="form-control">
        </div>
        <label class="col-sm-1 control-label" for="textinput">Port</label>
        <div class="col-sm-3">
            <input type="text" placeholder="Enter Port" class="form-control">
        </div>
    </div>
</div>

Answer 1

我认为你的意思是600x1280而不是相反，因为1280x600相当宽。

这样的事情怎么样..

<div class="form-horizontal" role="form">
    <div class="form-group">
        <div class="col-xs-7">
          <div class="container-fluid">
            <div class="row">
              <label class="col-xs-12 col-sm-3 control-label" for="textinput" style="text-align:center">Server IP</label>
                <div class="col-xs-12 col-sm-9">
                  <input type="text" placeholder="Enter IP Address" class="form-control">
                </div>
            </div>
          </div>
        </div>
        <div class="col-xs-5">
          <div class="container-fluid">
            <div class="row">
                <label class="col-xs-12 col-sm-3 control-label" for="textinput">Port</label>
                <div class="col-xs-12 col-sm-9">
                    <input type="text" placeholder="Enter Port" class="form-control">
                </div>
            </div>
          </div>
        </div>
    </div>
</div>