Bootstrap3フォームで携帯端末のレイアウトを維持できない

Question

日付の行（曜日、月、年）と時間のある行（時間：分）を含むフォームを作成しました。フィールドはテキスト入力です。ほとんどの場合、変更する必要はありませんが、受け入れてフォームを送信するだけです。

レイアウトはPCとタブレットの両方で使いたいと思うようですが、モバイルを使用すると、5つの入力フィールドすべてが別々の行と全幅に配置されます。モバイルに十分なスペースがある場合でも。それは携帯電話で、いつフルスクリーンでPCとして見えるよう

Copy of my html

以下snippletは、インラインはそれを示しています。私はそれも携帯電話のPCで見てみたいです。

\t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
\t <div class="container"> 
 
\t <form class="form-horizontal" id="flexinform" action="usr_flexin.php" method="post"> 
 
\t \t <div class="form-group form-inline"> 
 
\t \t \t <label class="control-label col-xs-2">Dato</label> 
 
\t \t \t <input class="form-control" type="text" name="day" size="2" maxlength="2" value="17" onkeypress="return trapenter(month,event);" onchange="alertonchanges();" /> 
 
\t \t \t <input class="form-control" type="text" name="month" size="2" maxlength="2" value="02" onkeypress="return trapenter(year,event);" onchange="alertonchanges();" /> 
 
\t \t \t <input class="form-control" type="text" name="year" size="4" maxlength="4" value="2016" onkeypress="return trapenter(hour,event);" onchange="alertonchanges();" /> 
 
\t \t </div> 
 
\t \t <div class="form-group form-inline"> 
 
\t \t \t <label class="control-label col-xs-2">Tid</label> 
 
\t \t \t <input class="form-control" type="text" name="hour" size="2" maxlength="2" value="23" onkeypress="return trapenter(minute,event);" onchange="alertonchanges();" /> 
 
\t \t \t : 
 
\t \t \t <input class="form-control" type="text" name="minute" size="2" maxlength="2" value="54" onkeypress="return trapenter(day,event);" onchange="alertonchanges();" /> 
 
\t \t </div> 
 
\t \t <div class="form-group"> 
 
\t \t \t <div class="col-xs-offset-2 col-xs-3"> 
 
\t \t \t \t <input type="submit" name="formflexin" class="btn btn-primary" value="Start"> 
 
\t \t \t \t <input type="reset" class="btn btn-default" value="Nulstil" onclick="givefocus(minute)"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </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

ブートストラップは、モバイル最初に、モバイルに、これは、典型的には、所望の動作です。それは.form-control CSS設定display: block;とwidth: 100%;によって引き起こされます。これらの設定は、より大きなサイズのメディアクエリによって削除されます。

フォームのデフォルトの動作を上書きするには、以下のCSSを追加します。

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