Bootstrap3表单不会在移动设备上保留布局

Question

我创建了一个包含日期行(日,月,年)的表单,以及下面一行和时间(小时:分钟).这些字段是文本输入,因为它们很少被更改,但只是接受并提交表单.

在PC和平板电脑上,布局看起来像我想拥有它 - 但是当使用移动设备时,它将所有5个输入字段放在单独的线和全宽度上.即使手机上有足够的空间.

我的HTML副本

下面的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" value="54" onkeypress="return trapenter(day,event);" onchange="alertonchanges();" />
		</div>
		<div class="form-group">
			<div class="col-xs-offset-2 col-xs-3">
				<input type="submit" name="formflexin" class="btn btn-primary" value="Start">
				<input type="reset" class="btn btn-default" value="Nulstil" onclick="givefocus(minute)">
			</div>
		</div>
	</form>
        </div>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

Bootstrap 是移动优先的，在移动设备上这通常是所需的行为。这是由.form-controlCSS 设置display: block;和width: 100%;. 这些设置可通过较大尺寸的媒体查询来删除。

添加以下 CSS 以覆盖表单的默认行为：

#flexinform input.form-control {
    display: inline-block;
    width: auto;
}