如何使用@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>更多推荐
发布评论