Q&A
ご回答有難うございます。
col-lg-12を外して試しましたが、変化ありませんで、
min-widthも特段明示的に指定した記憶もありません。
他に何か考えられる点ありますでしょうか。
以下のソースで、
1070px以上画面の横幅を広げると、自動で広がっていく一方で、
1070px以下に画面横幅を狭めると、フォーム部品が自動で小さくなっていきません。
原因と、フォーム部品が切れなくなる対策について
教えていただければ幸いです。
html
1<div class="container"> 2 <div class="col-lg-12" style="margin-top: 10px;"> 3 <div class="bs-component"> 4 5 <div class="panel-group" id="accordion"> 6 <div class="panel panel-default"> 7 <div class="panel-heading"> 8 <h4 class="panel-title"> 9 <a style="text-decoration: none;" class="glyphicon glyphicon-filter" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 10 検索 11 </a> 12 </h4> 13 </div> 14 15 <form> 16 <div class="form-group"> 17 <div id="collapseOne" class="panel-collapse collapse in"> 18 <div class="panel-body"> 19 <div class="row"> 20 <div class="col-lg-6"> 21 <div class="input-group"> 22 <span class="input-group-addon"></span> 23 <input type="text" class="form-control" placeholder="" /> 24 </div> 25 </div> 26 <div class="col-lg-6"> 27 <div class="input-group"> 28 <span class="input-group-addon"></span> 29 <select class="form-control"> 30 <option>選択肢１</option> 31 <option>選択肢２</option> 32 <option>選択肢３</option> 33 </select> 34 </div> 35 </div> 36 </div> 37 38 <div class="row"> 39 <div class="col-lg-6"> 40 <div class="input-group"> 41 <span class="input-group-addon"></span> 42 <input type="text" class="form-control" placeholder="" /> 43 </div> 44 </div> 45 <div class="col-lg-6"> 46 <div class="input-group"> 47 <span class="input-group-addon"></span> 48 <input type="date" class="form-control" style="width:45%;" /> 49 <span class="form-control" style="border: none; width:10%;">〜</span> 50 <input type="date" class="form-control" style="width:45%;" /> 51 </div> 52 </div> 53 </div> 54 55 <div class="row"> 56 <div class="col-lg-6"> 57 <div class="input-group"> 58 <span class="input-group-addon"></span> 59 <input type="date" class="form-control" style="width:45%;" /> 60 <span class="form-control" style="border: none; width:10%;">〜</span> 61 <input type="date" class="form-control" style="width:45%;" /> 62 </div> 63 </div> 64 <div class="col-lg-6"> 65 <div class="input-group"> 66 <span class="input-group-addon"></span> 67 <input type="date" class="form-control" style="width:45%;" /> 68 <span class="form-control" style="border: none; width:10%;">〜</span> 69 <input type="date" class="form-control" style="width:45%;" /> 70 </div> 71 </div> 72 </div> 73 74 <div class="row"> 75 <div class="col-lg-6"> 76 <input type="button" class="btn-ctm" value="検索" onclick="remoteActionTest3();" /> 77 </div> 78 </div> 79 80 </div> 81 </div> 82 </div> 83 </form> 84 </div> 85 </div> 86 87 88 <table class="table table-striped table-hover"> 89 <thead> 90 <tr> 91 <th> 92 </th> 93 <th> 94 </th> 95 </tr> 96 </thead> 97 <tbody> 98 <tr> 99 100 <td></td> 101 <td></td> 102 103 </tr> 104 </tbody> 105 </table> 106 107 108 </div> 109 </div> 110 </div> 111
css
1/* custom bootstrap */ 2.container { 3 width: 100%; 4} 5 6.page-header{ 7 font-size: 20px; 8 margin: 20px 0; 9} 10.panel-heading { 11 font-family: 'FontAwesome' 12} 13.panel-heading a { 14 display: block; 15 width: 100% 16} 17.panel-heading a:hover { 18 text-decoration: none; 19} 20 21.btn-ctm { 22 margin: 10px 0; 23 padding: 5px; 24 background: #EEE; 25 border-top: 1px solid #DDD; 26 border-left: 1px solid #DDD; 27 border-right: 1px solid #BBB; 28 border-bottom: 1px solid #BBB; 29 color:#111; 30 width: 100px; 31} 32 33.input-group { 34 margin: 0 0 10px; 35} 36 37.panel-body { 38 padding: 15px 15px 5px; 39} 40
回答2件
0
ベストアンサー
テスト環境を提示いただけますでしょうか？
（OS、ブラウザ、サーバーのOS・apacheなどのバージョン等）
Windows8.1 ＋Firefox44.0.2 と IE 11.0.9600で試してみましたが提示されたcss込みでもブラウザの幅に合わせて部品もサイズも小さくなります。
出先のノートPCなのでchromeはテストしていません。
OS-Xでサファリをお使いの場合はブラウザの非対応などがあるかもしれません。
【追記】
自分はbootstrap3のグリッドシステムについては以下のように出来るだけ全条件を書くようにしています。
以下のように指定して直らないでしょうか？
HTML
1<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 2
画面幅についてはcol-lg は1200px 以上ですので1070pxで制限を掛けたいのならcol-mdまでとなります。
containerの最大幅を指定するなら以下のようにmax-widthを指定されてはどうでしょうか。
CSS
1.container { 2 /* width: 100%; */ 3 max-width: 1070px; 4} 5
以下のサイトなども参考にしてみてください。
https://html5experts.jp/shumpei-shiraishi/1538/
投稿2016/03/01 03:31
編集2016/03/01 06:14
総合スコア241
0
HTML
1<div class="container"> 2 <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/28 12:42
総合スコア55
お役に立てずすみません。
私の知識範囲ではどう考えても、読み込んでいるcssやjsの方で、幅の制御をしているとしか考えられません。
有識の方の意見が欲しいですね。
解決できたら、私にも教えていただけると幸いです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。