Bootstrapで、カラムが横に並ばない

<!Doctype html>
		<head><https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
		<link rel="stylesheet" type="text/css" href="style.css"></head>
	<body>
		<div class="wrapper">
			<div class="header">
				<H2>主の独り言</H>
					<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-sm-2" style="background-color:red;">Red</div>
				    <div class="col-sm-8" style="background-color:blue;">Blue</div>
				    <div class="col-sm-2" style="background-color:yellow;">Yellow</div>
				  </div>
				</div>
				
			</div>
		</div>
	</body>
</html>

下行の方のコードなのですが、

<div class="container-fluid"> 以降で、bootstrapのカラムを2,8,2で分けているのですが、縦に並びます。横に並べたいのですが、アドバイスお願いいたします。

行動規範の内容に同意します

回答2件

col-sm-という接頭辞を持つクラスを指定すると、768px以上の画面では横並び、それ未満では縦並び、というようになってしまうので、質問者さんの実現したい常に横並びを行うにはcol-xs-を指定します。

HTML
1<!Doctype html>
2<html><!-- 追加 -->
3<head>
4    <meta charset="utf-8"><!-- 追加 -->
5    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6    <title>タイトル</title><!-- 追加 -->
7</head>
8<body>
9<div class="wrapper">
10    <div class="header">
11        <h2>主の独り言</h2><!-- h2タグの対応ができていなかったので修正 -->
12        <img src="ninja.jpg">
13
14        <p id="RealtimeClockArea">※ここに時計(2桁固定版)が表示されます。</p>
15        <script type="text/javascript">
16            function set2fig(num) {
17                // 桁数が1桁だったら先頭に0を加えて2桁に調整する
18                var ret;
19                if (num < 10) {
20                    ret = "0" + num;
21                }
22                else {
23                    ret = num;
24                }
25                return ret;
26            }
27            function showClock2() {
28                var nowTime = new Date();
29                var nowHour = set2fig(nowTime.getHours());
30                var nowMin = set2fig(nowTime.getMinutes());
31                var nowSec = set2fig(nowTime.getSeconds());
32                var msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。";
33                document.getElementById("RealtimeClockArea").innerHTML = msg;
34            }
35            setInterval('showClock2()', 1000);
36        </script>
37    </div>
38    <div class="container-fluid">
39        <div class="row">
40            <div class="col-xs-2" style="background-color:red;">Red</div><!-- col-sm-をcol-xs-に変更 -->
41            <div class="col-xs-8" style="background-color:blue;">Blue</div><!-- col-sm-をcol-xs-に変更 -->
42            <div class="col-xs-2" style="background-color:yellow;">Yellow</div><!-- col-sm-をcol-xs-に変更 -->
43        </div>
44    </div>
45</div>
46<!-- 不要なdivの閉じタグを削除 -->
47</body>
48</html>

投稿2017/02/23 05:50

編集2017/02/23 05:53

s8_chu

総合スコア14731

tidavest

2017/02/23 05:57

宣言を変えたらできました。どうもありがとうございます。

行動規範の内容に同意します

ベストアンサー

・<html> の開始タグがない

意味不明な記述

<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>

↓

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

投稿2017/02/23 05:40

退会済みユーザー

総合スコア0

tidavest

2017/02/23 05:57

ありがとうございます。出来ました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

Bootstrapで、カラムが横に並ばない

関連した質問