Q&A
前提・実現したいこと
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件
0
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">
投稿2019/10/29 04:07
総合スコア13749
0
ベストアンサー
質問者さんの実現したいことは、以下のように 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
総合スコア14731
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。