Bootstrap 4 Rastersystem Ausgabe

Question

table-> tr> td ist fast gleichbedeutend mit container-fluid-> row-> col-* or col-*-*

Mein Problem ist sehr einfach, aber vielleicht weiß ich nicht, wie Bootstrap 4 Grid-System funktioniert.

ist an meinem unten Problem aussehen lassen,

Ich möchte Gruppe drei Elemente, indem sie in einem äußeren div unter div class=row wie unten gezeigt Verpackung und es sollte in Arbeitsteil Demo-Beispiel zur Folge haben. (Bitte ignorieren Sie meine benutzerdefinierte CSS-Klasse für die Zeit)

Also das Problem ist, wenn ich äußere div nehme, es nur vermasselt das Layout.

<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>&nbsp;<span>abcde</span></div> 
      <div class="col-md-2 text-center resume-mobile"><i class="fa fa-mobile" aria-hidden="true"></i>&nbsp;<span>abcde</span></div> 
      <div class="col-md-5 text-left resume-email"><i class="fa fa-envelope-o" aria-hidden="true"></i> &nbsp;<a href="">abcde</a></div> 

     </div> 
    </div> 
</div> 

Ohne äußere div, sieht es aus und funktioniert perfekt in Ordnung.

<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>&nbsp;<span>abcde</span></div> 
      <div class="col-md-2 text-center resume-mobile"><i class="fa fa-mobile" aria-hidden="true"></i>&nbsp;<span>abcde</span></div> 
      <div class="col-md-5 text-left resume-email"><i class="fa fa-envelope-o" aria-hidden="true"></i> &nbsp;<a href="">abcde</a></div> 

    </div> 
</div> 

Reproduktion des Problems (maximieren Sie einfach das Ausgabefenster das exakte Ergebnis zu erhalten)

https://plnkr.co/edit/fk0uO3Z9fR1EVEc79Xb3?p=preview

Answer 1

Zunächst einmal, Sie Ihre style.css vor bootstrap.css Laden statt von nach - Sie sollten Ihr Theming nach dem Bootstrap laden, um es richtig zu überschreiben. Zweitens werden Sie den Bootstrap js nicht in die Fußzeile einschließen, so dass Sie von keiner der erweiterten Bootstrap-Funktionen profitieren.

Aber um Ihre Frage zu beantworten, ist das obige "Arbeitsbeispiel", weil Sie es richtig machen. Sie brauchen nicht den col-12-Wrapper um die Sektionen, wie Sie denken, und wenn Sie das wollen, dann müssen Sie eine andere interne class = "row" darin verschachteln und den inneren Inhalt umhüllen.

Siehe "Verschachteln": http://getbootstrap.com/docs/4.0/layout/grid/#nesting