我创建了一个包含日期行(日,月,年)的表单,以及下面一行和时间(小时:分钟).这些字段是文本输入,因为它们很少被更改,但只是接受并提交表单.
在PC和平板电脑上,布局看起来像我想拥有它 - 但是当使用移动设备时,它将所有5个输入字段放在单独的线和全宽度上.即使手机上有足够的空间.
下面的snipplet,内联显示它在移动设备上的外观以及全屏时的PC.我希望它也可以在移动电脑上看起来像.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<form class="form-horizontal" id="flexinform" action="usr_flexin.php" method="post">
<div class="form-group form-inline">
<label class="control-label col-xs-2">Dato</label>
<input class="form-control" type="text" name="day" size="2" maxlength="2" value="17" onkeypress="return trapenter(month,event);" onchange="alertonchanges();" />
<input class="form-control" type="text" name="month" size="2" maxlength="2" value="02" onkeypress="return trapenter(year,event);" onchange="alertonchanges();" />
<input class="form-control" type="text" name="year" size="4" maxlength="4" value="2016" onkeypress="return trapenter(hour,event);" onchange="alertonchanges();" />
</div>
<div class="form-group form-inline">
<label class="control-label col-xs-2">Tid</label>
<input class="form-control" type="text" name="hour" size="2" maxlength="2" value="23" onkeypress="return trapenter(minute,event);" onchange="alertonchanges();" />
:
<input class="form-control" type="text" name="minute" size="2" maxlength="2" …