bootstrap4でグリッドレイアウトがうまくいかない

前提・実現したいこと

bootstrap4にて、ウェブサイトを制作しています。
グリッドレイアウトがうまくいかず躓いています。

A C
B
このように表示したいところが
A
B
C
となってしまいます。
どうか力を貸してください。

該当のソースコード

HTML
1    <!-- 見出し -->
2    <div class="jumbotron jumbotron-fluid">
3      <div class="container">
4        <h1 class="display-6">１章　入力</h1>
5        <p class="lead"></p>
6      </div><!-- /.container -->
7    </div><!-- /.jumbotron -->
8    <div class="container">
9    </div><!-- /.container -->
10    <div class="row">
11      <div class="col-2">
12        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
13          <a class="nav-link" data-toggle="pill" href="#v-pills-1-1" role="tab" aria-controls="1-1" aria-selected="false">1-1</a>
14          <a class="nav-link" data-toggle="pill" href="#v-pills-1-2" role="tab" aria-controls="1-2" aria-selected="false">1-2</a>
15          <a class="nav-link" data-toggle="pill" href="#v-pills-1-3" role="tab" aria-controls="1-3" aria-selected="false">1-3</a>
16          <a class="nav-link" data-toggle="pill" href="#v-pills-1-4" role="tab" aria-controls="1-4" aria-selected="false">1-4</a>
17        </div>
18      </div>
19      <div class="col-10">
20        <div class="tab-content" id="v-pills-tabContent">
21          <div class="tab-pane fade" id="v-pills-1-1" role="tabpanel">
22            <div class="col-4">
23              <div class="card">
24                <div class="card-header bg-primary">A</div>
25                <div class="card-body">
26                  あああああ
27                </div>
28              </div>
29              <div class="card">
30                <div class="card-header bg-primary">B</div>
31                <div class="card-body">
32                  いいいいいいいい
33                </div>
34              </div>
35            </div>
36            <div class="col-6">
37              
38              <div class="card">
39                <div class="card-header bg-primary">C</div>
40                <div class="card-body">
41                  うううううう
42                </div>
43              </div>
44            </div>
45          </div>

試したこと

colの部分をcol-sm-●などに変えてみましたがうまくいきません。

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

bootstrap4.3.1

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

回答2件

Grid system では .col の親が .row になりますが、.tab-pane の下に子を増やすのが簡単でしょう。

HTML
1          <div class="tab-pane fade" id="v-pills-1-1" role="tabpanel">
2           <div class="row">
3            <div class="col-4">

https://getbootstrap.com/docs/4.3/layout/grid/#how-it-works

投稿2019/10/29 04:07

x_x

総合スコア13749

ベストアンサー

質問者さんの実現したいことは、以下のように flexbox を用いて行えます (動作確認用リンク)。flex アイテムの折り返しには break-* プロパティが使用出来るので、今回は break-before プロパティを使用しました (参考)。

HTML
1<div class="jumbotron jumbotron-fluid">
2  <div class="container">
3    <h1 class="display-6">１章　入力</h1>
4    <p class="lead"></p>
5  </div>
6</div>
7<div class="container">
8</div>
9<div class="row">
10  <div class="col-2">
11    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
12      <a class="nav-link" data-toggle="pill" href="#v-pills-1-1" role="tab" aria-controls="1-1" aria-selected="false">1-1</a>
13      <a class="nav-link" data-toggle="pill" href="#v-pills-1-2" role="tab" aria-controls="1-2" aria-selected="false">1-2</a>
14      <a class="nav-link" data-toggle="pill" href="#v-pills-1-3" role="tab" aria-controls="1-3" aria-selected="false">1-3</a>
15      <a class="nav-link" data-toggle="pill" href="#v-pills-1-4" role="tab" aria-controls="1-4" aria-selected="false">1-4</a>
16    </div>
17  </div>
18  <div class="col-10">
19    <div class="tab-content" id="v-pills-tabContent">
20      <div class="tab-pane fade d-flex align-content-start flex-wrap flex-column" id="v-pills-1-1" role="tabpanel">
21        <div class="col-4">
22          <div class="card">
23            <div class="card-header bg-primary">A</div>
24            <div class="card-body">
25              あああああ
26            </div>
27          </div>
28          <div class="card">
29            <div class="card-header bg-primary">B</div>
30            <div class="card-body">
31              いいいいいいいい
32            </div>
33          </div>
34        </div>
35        <div class="col-6">
36          <div class="card">
37            <div class="card-header bg-primary">C</div>
38            <div class="card-body">
39              うううううう
40            </div>
41          </div>
42        </div>
43      </div>
44    </div>
45  </div>
46</div>

CSS
1.tab-content > .active {
2  display: flex;
3}
4
5.tab-pane.d-flex > div:nth-of-type(2n){
6  break-before: always;
7}

投稿2019/10/25 16:32

編集2019/10/25 16:36

s8_chu

総合スコア14731

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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