2列目の「row」にのみグリッドシステムが効かず、横並びに配置されない。

前提・実現したいこと

2列目の「row」もグリッドシステムを効かせ、横並びに配置したい。

1列目の「row」では問題なく横並びに配置されている為、jqueryやcssでの問題はないかと考えています。

該当のソースコード

html

  <div class="container">

      <div class="row">
        <div class="col-sm-6 left">
          <P>PRODUCT</P>
        </div>
        <div class="col-sm-6 right">
          <a href="#">MORE</a>
        </div>
      </div>

      <div class="row">
        
        <div class="col-sm-4 product">
          <a href="#"><img src="img/fes001t.png" alt="プロダクト1の画像"></a>
          <div class="explain"></div>
            <p> The World</p>
            <p> Festival Guide -</p>
            <p> 海外の音楽フェス完</p>
            <p> 全ガイド -</p>
          </div>
        </div>
        <div class="col-sm-4 product">
          <a href="#"><img src="img/banner_サムネイル21.png" alt="プロダクト2の画像"></a>
          <div class="explain"></div>
            <p> The World</p>
            <p> Festival Guide -</p>
            <p> 海外の音楽フェス完</p>
            <p> 全ガイド -</p>
          </div>
        </div>
        <div class="col-sm-4 product">
          <a href="#"><img src="img/365日本カレンダー_サムネイル1.png" alt="プロダクト3の画像"></a>
          <div class="explain"></div>
            <p> The World</p>
            <p> Festival Guide -</p>
            <p> 海外の音楽フェス完</p>
            <p> 全ガイド -</p>
          </div>
        </div>

      </div>
  </div>

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

一行目の PRODUCT, MENU というテキストが横並びになっており、二行目の要素が横並びになっていないことを問題としているのであれば、要素の位置が前者と異なるためそのようなことになっています。これを修正すると以下のようになります (動作確認用リンク)。

HTML
1<div class="container">
2
3  <div class="row">
4    <div class="col-sm-6 left">
5      <P>PRODUCT</P>
6    </div>
7    <div class="col-sm-6 right">
8      <a href="#">MORE</a>
9    </div>
10  </div>
11
12  <div class="row">
13    <div class="col-sm-4 product">
14      <a href="#"><img src="img/fes001t.png" alt="プロダクト1の画像"></a>
15      <div class="explain"></div>
16      <p> The World</p>
17      <p> Festival Guide -</p>
18      <p> 海外の音楽フェス完</p>
19      <p> 全ガイド -</p>
20    </div>
21    <div class="col-sm-4 product">
22      <a href="#"><img src="img/banner_サムネイル21.png" alt="プロダクト2の画像"></a>
23      <div class="explain"></div>
24      <p> The World</p>
25      <p> Festival Guide -</p>
26      <p> 海外の音楽フェス完</p>
27      <p> 全ガイド -</p>
28    </div>
29    <div class="col-sm-4 product">
30      <a href="#"><img src="img/365日本カレンダー_サムネイル1.png" alt="プロダクト3の画像"></a>
31      <div class="explain"></div>
32      <p> The World</p>
33      <p> Festival Guide -</p>
34      <p> 海外の音楽フェス完</p>
35      <p> 全ガイド -</p>
36    </div>
37  </div>
38
39</div>