

営業時間のラベルから二つ目の時間入力までの要素を画面が小さくなっても横一列にしたいと思っていますが上手くいきません。画面を小さくすると、ラベルと入力のテキストボックスが縦に並んでしまいます。どう修正したらいいのか教えていただいてもよろしいでしょうか。  
【コード】

[code]

    <!DOCTYPE html>
    <html lang="ja">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>あいうえお商店</title>
    
            <link href="css/bootstrap.min.css" rel="stylesheet">
            <link type="text/css" rel="stylesheet" href="css/bootstrap-timepicker.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
        </head>
        <body>
            <div class="container">
                <p>あいうえお商店</p>
                <p>住所：東京都千代田区</p>
                <form class="form-inline">
                    <div class="form-group">
                        <label class="control-label" for="businesshours">営業時間：</label>
                        <div class="input-group bootstrap-timepicker timepicker" style="width:110px">
                            <input type="text" id="businesshours" class="form-control input-small timepicker1">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                        </div> ～
                        <div class="input-group bootstrap-timepicker timepicker" style="width:110px">
                            <input type="text" class="form-control input-small timepicker1">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                        </div>
                    </div>
                </form>
            </div>
            <script type="text/javascript">
                $('.timepicker1').timepicker({
                    showMeridian: false
                });
            </script>
        </body>
    </html>
    
[/code]


CC BY-SA 3.0
2016-12-05T19:12:21.800
30935
2016-12-06T05:58:57.740
2016-12-06T05:58:57.740
17348
question
html jquery css bootstrap
要素を横一列で並べたい。

[code]

    .form-inline .input-group {
        display: inline-table;
        vertical-align: middle;
    }
    
[/code]

横並びのときは上記のCSSが効いているので、これをメディアクエリ外に書いても効くのですが、ほかに影響が出るとまずいので、

[code]

    .input-group.timepicker {
        display: inline-table;
        vertical-align: middle;
    }
    
[/code]

こんな感じの指定でいかがでしょうか？


CC BY-SA 3.0
2016-12-06T02:06:48.937
30939
2016-12-06T02:06:48.937
19243
30935
answer