bootstrapでcol-xs-４が効かない

Bootstrapにて2列3行を作りたいのですが、以下のコードを入力しても、全て縦並びになってしまいます。
container、row、colが全てあるはずなのですが、何が原因かわかりません。
ご回答いただけると助かります。

HTML
1<div class="container">
2			<div class="students">
3				<div class="student row">
4					<div class="image col-xs-4">
5						<img src="img/take.jpg" alt="">
6					</div>
7					<div class="impression col-xs-8">
8						<p>text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.</p>
9					</div>
10				</div>
11				<div class="student">
12					<img src="img/minami_sato.jpg" alt="">
13					<div class="impression">
14						<p>text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.</p>
15					</div>
16				</div>
17				<div class="student">
18					<img src="img/asada.jpg" alt="">
19					<div class="impression">
20						<p>text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.</p>
21					</div>
22				</div>
23			</div>
24</div>

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

回答1件

ベストアンサー

studentタグが３つありますが、１つ目のタグにしか、rowが書いてないと思います。
残りの２つも同じ構造にすべきだと思います。
また、１つ目のstudentタグの構造は合ってると思うのですが、pタグのテキストが長すぎて、col-xs-8で割り当てられた幅を超えて、横並びにならないんだと思います。
(もしくは、画像のサイズが大きい)

以下のような構造にしていただければ、できると思います。

html
1<div class="container">
2            <div class="students">
3                <div class="student row">
4                    <div class="image col-xs-4">
5                        <img src="img/take.jpg" alt="">
6                    </div>
7                    <div class="impression col-xs-8">
8                        <p>text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.</p>
9                    </div>
10                </div>
11                <div class="student row"> <!-- 変更 -->
12									<div class="image col-xs-4"><!-- 変更 -->
13                    <img src="img/minami_sato.jpg" alt="">
14									</div><!-- 変更 -->
15                    <div class="impression col-xs-8"><!-- 変更 -->
16                        <p>text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.</p>
17                    </div>
18                </div>
19                <div class="student row"><!-- 変更 -->
20									<div class="image col-xs-4"><!-- 変更 -->
21                    <img src="img/asada.jpg" alt="">
22									</div><!-- 変更 -->
23                    <div class="impression col-xs-8">
24                        <p>text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.text.</p>
25                    </div>
26                </div>
27            </div>
28</div>