s8_chu score 14586
2017/02/23 14:53 投稿
| `col-sm-`という接頭辞を持つクラスを指定すると、基本は縦積みでブレークポイントを超えると横並び、というようになってしまうので、質問者さんの実現したい常に横並びを行うには`col-xs-`を指定します。 |
| `col-sm-`という接頭辞を持つクラスを指定すると、768px以上の画面では横並び、それ未満では縦並び、というようになってしまうので、質問者さんの実現したい常に横並びを行うには`col-xs-`を指定します。 |
| ```HTML |
| <!Doctype html> |
| <html><!-- 追加 --> |
| <head> |
| <meta charset="utf-8"><!-- 追加 --> |
| <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
| <title>タイトル</title><!-- 追加 --> |
| </head> |
| <body> |
| <div class="wrapper"> |
| <div class="header"> |
| <h2>主の独り言</h2><!-- h2タグの対応ができていなかったので修正 --> |
| <img src="ninja.jpg"> |
| <p id="RealtimeClockArea">※ここに時計(2桁固定版)が表示されます。</p> |
| <script type="text/javascript"> |
| function set2fig(num) { |
| // 桁数が1桁だったら先頭に0を加えて2桁に調整する |
| var ret; |
| if (num < 10) { |
| ret = "0" + num; |
| } |
| else { |
| ret = num; |
| } |
| return ret; |
| } |
| function showClock2() { |
| var nowTime = new Date(); |
| var nowHour = set2fig(nowTime.getHours()); |
| var nowMin = set2fig(nowTime.getMinutes()); |
| var nowSec = set2fig(nowTime.getSeconds()); |
| var msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。"; |
| document.getElementById("RealtimeClockArea").innerHTML = msg; |
| } |
| setInterval('showClock2()', 1000); |
| </script> |
| </div> |
| <div class="container-fluid"> |
| <div class="row"> |
| <div class="col-xs-2" style="background-color:red;">Red</div><!-- col-sm-をcol-xs-に変更 --> |
| <div class="col-xs-8" style="background-color:blue;">Blue</div><!-- col-sm-をcol-xs-に変更 --> |
| <div class="col-xs-2" style="background-color:yellow;">Yellow</div><!-- col-sm-をcol-xs-に変更 --> |
| </div> |
| </div> |
| </div> |
| <!-- 不要なdivの閉じタグを削除 --> |
| </body> |
| </html> |
| ``` |
s8_chu score 14586
2017/02/23 14:50 投稿
| `col-sm-`という接頭辞を持つクラスを指定すると、基本は縦積みでブレークポイントを超えると横並び、というようになってしまうので、質問者さんの実現したい常に横並びを行うには`col-xs-`を指定します。 |
| ```HTML |
| <!Doctype html> |
| <html><!-- 追加 --> |
| <head> |
| <meta charset="utf-8"><!-- 追加 --> |
| <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
| <title>タイトル</title><!-- 追加 --> |
| </head> |
| <body> |
| <div class="wrapper"> |
| <div class="header"> |
| <h2>主の独り言</h2><!-- h2タグの対応ができていなかったので修正 --> |
| <img src="ninja.jpg"> |
| <p id="RealtimeClockArea">※ここに時計(2桁固定版)が表示されます。</p> |
| <script type="text/javascript"> |
| function set2fig(num) { |
| // 桁数が1桁だったら先頭に0を加えて2桁に調整する |
| var ret; |
| if (num < 10) { |
| ret = "0" + num; |
| } |
| else { |
| ret = num; |
| } |
| return ret; |
| } |
| function showClock2() { |
| var nowTime = new Date(); |
| var nowHour = set2fig(nowTime.getHours()); |
| var nowMin = set2fig(nowTime.getMinutes()); |
| var nowSec = set2fig(nowTime.getSeconds()); |
| var msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。"; |
| document.getElementById("RealtimeClockArea").innerHTML = msg; |
| } |
| setInterval('showClock2()', 1000); |
| </script> |
| </div> |
| <div class="container-fluid"> |
| <div class="row"> |
| <div class="col-xs-2" style="background-color:red;">Red</div><!-- col-sm-をcol-xs-に変更 --> |
| <div class="col-xs-8" style="background-color:blue;">Blue</div><!-- col-sm-をcol-xs-に変更 --> |
| <div class="col-xs-2" style="background-color:yellow;">Yellow</div><!-- col-sm-をcol-xs-に変更 --> |
| </div> |
| </div> |
| </div> |
| <!-- 不要なdivの閉じタグを削除 --> |
| </body> |
| </html> |
| ``` |
