Bootstrap3 form does not support layout on mobile devices

Question

I filled out a form containing a date line (day, month, year) and a line below with time (hour: minute). Fields are text inputs because they rarely need to be changed, but simply accept and submit the form.

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

Copy of my html

The snipple below, inline shows it how it looks on a mobile phone and PC when it is in full screen mode. I would like it to look like on a PC on a mobile phone.

<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

First, the boot disk is mobile, and on mobile devices this is usually the desired behavior. This is caused by the setting .form-control CSS display: block; and width: 100%; . These settings are deleted using multimedia queries at large sizes.

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

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