如何使用@media在输入上方设置标签？(How to set labels above the input with @media?)

如何使用@media在输入上方设置标签？(How to set labels above the input with @media?)

我有简单的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>

I have simple Bootstrap block which looks like this:

The main problem occurs on smaller resolution, like 1280*600:

As you can see the mos of the ip is not seen, so I want to set labes above the inputs like this:

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

I assume you mean 600x1280 rather than the other way round as 1280x600 is quite wide.

How about something like this..

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