Bootstrap3 form does not keep it layout on mobile

Question

I have crated a form containing a date line (day, month, year) and a line below with time (hour : minutes). The fields are text inputs because they should rarely be changed but just accepted and submit the form.

The layout looks like I want to have it, both on PC and tablets - but when using a mobile it puts all 5 input fields on a seperate line and in full width. Even when there is enough space on the mobile.

Copy of my html

The snipplet below, inline shows it as it looks on mobile and as PC when in fullscreen. I would like it to look as on PC on mobile also.

	<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 is mobile first, and on mobile this is typically the desired behavior. It's caused by the .form-control CSS setting display: block; and width: 100%;. These settings are removed via media queries at larger sizes.

Add the following CSS to override the default behavior for your form:

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