0
table-> tr> tdは私の問題は非常にシンプルですが、多分私は4グリッドシステムがどのように動作するか、ブートストラップ知らないcontainer-fluid-> row-> col-* or col-*-*ブートストラップ4グリッドシステムの問題
とほぼ同等です。のは、私の下の問題を見てみましょう
、
は、私は、以下に示すように、グループにdiv class=row下外側divでそれらをラップすることにより、3つの要素が欲しい、それが一部のデモ例を作業になるはずです。 （私のカスタムCSSクラスは当面は無視してください）
私が外側のdivを取ると、レイアウトが崩れるだけです。
<div class="container-fluid">
<div class="row">
<div class="col-12"> <!-- here ---- i tried class="col-12 or col-md-12 -->
<h2 class="curriculum-vitae col-md-6 text-right">Text1</h2>
<h2 class="resume-name col-md-6 text-left">text2</h2>
<h6 class="resume-address text-center col-md-12">abcdefghijklmnopqrstuvwxyz</h6>
</div>
<div class="col-12"> <!-- i tried class="col-12 or col-md-12" -->
<div class="col-md-5 text-right resume-mobile"><i class="fa fa-mobile" aria-hidden="true"></i> <span>abcde</span></div>
<div class="col-md-2 text-center resume-mobile"><i class="fa fa-mobile" aria-hidden="true"></i> <span>abcde</span></div>
<div class="col-md-5 text-left resume-email"><i class="fa fa-envelope-o" aria-hidden="true"></i> <a href="">abcde</a></div>
</div>
</div>
</div>
外側のdivがないと、見た目も完璧です。
<div class="container-fluid">
<div class="row">
<h2 class="curriculum-vitae col-md-6 text-right">Text1</h2>
<h2 class="resume-name col-md-6 text-left">text2</h2>
<h6 class="resume-address text-center col-md-12">abcdefghijklmnopqrstuvwxyz</h6>
<div class="col-md-5 text-right resume-mobile"><i class="fa fa-mobile" aria-hidden="true"></i> <span>abcde</span></div>
<div class="col-md-2 text-center resume-mobile"><i class="fa fa-mobile" aria-hidden="true"></i> <span>abcde</span></div>
<div class="col-md-5 text-left resume-email"><i class="fa fa-envelope-o" aria-hidden="true"></i> <a href="">abcde</a></div>
</div>
</div>
問題の再現（ただ、正確な結果を得るために、出力ウィンドウを最大化）
https://plnkr.co/edit/fk0uO3Z9fR1EVEc79Xb3?p=preview