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

我有一个简单的Bootstrap块，看起来像这样：



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



如您所见，看不到ip的mos，因此我想在输入上方设置标签，如下所示：

<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>

最佳答案

我认为您的意思是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>