html - Bootstrap3 表单不会在移动设备上保持布局

Question

我创建了一个包含日期线(日、月、年)和下方时间线(小时:分钟)的表格。这些字段是文本输入，因为它们应该很少更改，而只是接受并提交表单。

布局看起来像我想要的，无论是在 PC 上还是在平板电脑上 - 但在使用移动设备时，它会将所有 5 个输入字段放在单独的一行上并且全宽。即使手机上有足够的空间。

Copy of my html

下面的代码片段以内联方式显示了它在移动设备上的外观和全屏时在 PC 上的外观。我希望它在 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-control CSS 设置 display: block; 和 width: 100%; 引起的。这些设置通过较大尺寸的媒体查询删除。

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

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