回答編集履歴

2 修正

s8_chu

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>
```
1 修正

s8_chu

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><!-- 追加 -->
   <style type="text/css">  
       * {  
           margin: 0;  
           padding: 0;  
       }  
   </style>  
</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>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る