質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.40%

  • Bootstrap

    1089questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

bootstrap3で1070pxくらいから、自動で小さくならない原因と対策について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,598

tera1

score 72

以下のソースで、
1070px以上画面の横幅を広げると、自動で広がっていく一方で、
1070px以下に画面横幅を狭めると、フォーム部品が自動で小さくなっていきません。

原因と、フォーム部品が切れなくなる対策について
教えていただければ幸いです。

<div class="container">
        <div class="col-lg-12" style="margin-top: 10px;">
            <div class="bs-component">

                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a style="text-decoration: none;" class="glyphicon glyphicon-filter" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    検索
                                </a>
                            </h4>
                        </div>

                        <form>
                            <div class="form-group">
                                <div id="collapseOne" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon"></span>
                                                    <input type="text" class="form-control" placeholder="" />
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon"></span>
                                                    <select class="form-control">
                                                        <option>選択肢1</option>
                                                        <option>選択肢2</option>
                                                        <option>選択肢3</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon"></span>
                                                    <input type="text" class="form-control" placeholder="" />
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon"></span>
                                                    <input type="date" class="form-control" style="width:45%;" />
                                                    <span class="form-control" style="border: none; width:10%;"></span>
                                                    <input type="date" class="form-control" style="width:45%;" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon"></span>
                                                    <input type="date" class="form-control" style="width:45%;" />
                                                    <span class="form-control" style="border: none; width:10%;"></span>
                                                    <input type="date" class="form-control" style="width:45%;" />
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon"></span>
                                                    <input type="date" class="form-control" style="width:45%;" />
                                                    <span class="form-control" style="border: none; width:10%;"></span>
                                                    <input type="date" class="form-control" style="width:45%;" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-6">
                                                <input type="button" class="btn-ctm" value="検索" onclick="remoteActionTest3();" />
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>


                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>
                            </th>
                            <th>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>

                            <td></td>
                            <td></td>

                        </tr>
                    </tbody>
                </table>


            </div>
        </div>
    </div>
/* custom bootstrap */
.container {
  width: 100%;
}

.page-header{
  font-size: 20px;
  margin: 20px 0;
}
.panel-heading {
  font-family: 'FontAwesome'
}
.panel-heading a {
  display: block;
  width: 100%
}
.panel-heading a:hover {
  text-decoration: none;
}

.btn-ctm {
  margin: 10px 0;
  padding: 5px;
  background: #EEE;
  border-top: 1px solid #DDD;
  border-left: 1px solid #DDD;
  border-right: 1px solid #BBB;
  border-bottom: 1px solid #BBB;
  color:#111;
  width: 100px;
}

.input-group {
  margin: 0 0 10px;
}

.panel-body {
  padding: 15px 15px 5px;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

テスト環境を提示いただけますでしょうか?
(OS、ブラウザ、サーバーのOS・apacheなどのバージョン等)

Windows8.1 +Firefox44.0.2 と IE 11.0.9600で試してみましたが提示されたcss込みでもブラウザの幅に合わせて部品もサイズも小さくなります。

出先のノートPCなのでchromeはテストしていません。
OS-Xでサファリをお使いの場合はブラウザの非対応などがあるかもしれません。

【追記】
自分はbootstrap3のグリッドシステムについては以下のように出来るだけ全条件を書くようにしています。
以下のように指定して直らないでしょうか?

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">


画面幅についてはcol-lg は1200px 以上ですので1070pxで制限を掛けたいのならcol-mdまでとなります。
containerの最大幅を指定するなら以下のようにmax-widthを指定されてはどうでしょうか。

.container {
  /* width: 100%; */
  max-width: 1070px;
}


以下のサイトなども参考にしてみてください。
https://html5experts.jp/shumpei-shiraishi/1538/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

<div class="container">
        <div class="col-lg-12" style="margin-top: 10px;"> <!-- ここ「class="col-lg-12"」 -->


試してないのですが、調べてみたところ
class="col-lg-12"の指定が影響しているか、
もしくは読み込んでいるcssのどこかで、device毎に反応するように
 min-widthを指定していることも影響があるかもしれません。

参考 : 
http://getbootstrap.com/css/#grid-options
http://getbootstrap.com/css/#grid-media-queries

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/29 00:12

    ご回答有難うございます。
    col-lg-12を外して試しましたが、変化ありませんで、
    min-widthも特段明示的に指定した記憶もありません。
    他に何か考えられる点ありますでしょうか。

    キャンセル

  • 2016/02/29 09:28

    お役に立てずすみません。
    私の知識範囲ではどう考えても、読み込んでいるcssやjsの方で、幅の制御をしているとしか考えられません。
    有識の方の意見が欲しいですね。
    解決できたら、私にも教えていただけると幸いです。

    キャンセル

同じタグがついた質問を見る

  • Bootstrap

    1089questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。