0

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

<!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>
0

1 件の回答 1

1
.form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
}

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

.input-group.timepicker {
    display: inline-table;
    vertical-align: middle;
}

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

5
  • <style>.input-group.timepicker { display: inline-table; vertical-align: middle; }</style>をヘッダタグの中に入れてやってみましたが画面を小さくしたときに依然として横一列になりません。やり方が間違っていますでしょうか。
    – kazu
    Commented 2016年12月6日 3:21
  • 指定する以前と変わらないという感じでしょうか?私のほうでは画面を大きくしたときと同じように横並びになってますが…
    – gin
    Commented 2016年12月6日 3:33
  • 変化はあり、画面を小さくしたときに横一列になることが確認できました。しかし、画面の横幅を最小にしたときに横一列を維持できないのですがそれは不可能なのでしょうか。すいません、画面の横幅を最小にしても横一列になるような状態にしたいと思ってます。
    – kazu
    Commented 2016年12月6日 3:51
  • それは基本的に「画面幅」<「横並び全体の幅」となった状態なので直接指定している「style="width:110px"」で調整するしかないのかなと思います。 ただ一応強引にやる手はあります。text-nowrapを追加してみてください。指定場所はここ「<div class="form-group text-nowrap">」です。
    – gin
    Commented 2016年12月6日 4:11
  • なるほどです。text-nowrapやってみました。画面の横幅は最小にするとラベルから二つ目の時間入力までのものがすこし隠れた形になるのですね。勉強になりました。
    – kazu
    Commented 2016年12月6日 5:08

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。