bootstrap 4 problème du système de grille

Question

table-> tr> td est presque équivalente à container-fluid-> row-> col-* or col-*-*

Mon problème est très simple, mais peut-être je ne sais pas comment le système d'amorçage 4 de la grille fonctionne.

Regardons mon problème ci-dessous,

Je veux groupe trois éléments en les enveloppant dans une enveloppe extérieure div sous div class=row comme indiqué ci-dessous et il devrait conduire à travailler par exemple une partie de démonstration. (Veuillez ignorer ma classe css personnalisée pour l'instant)

Donc, le problème est quand je prends div externe, il vient gâcher la mise en page.

<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> 

Sans div externe, il semble et fonctionne parfaitement bien.

<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> 

Reproduction du problème (juste agrandissez la fenêtre de sortie pour obtenir le résultat exact)

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

Answer 1

Tout d'abord, vous chargez votre style.css avant bootstrap.css à la place d'après - vous devriez charger votre thème après bootstrap afin de passer outre. Deuxièmement, vous n'incluez pas le bootstrap js dans le pied de page, vous ne bénéficierez donc d'aucune fonctionnalité d'amorçage améliorée. Mais pour répondre à votre question, l'exemple de 'travail' ci-dessus est parce que vous le faites correctement. Vous n'avez pas besoin de l'encapsuleur col-12 autour des sections comme vous le pensez, et si vous le souhaitez, vous devez imbriquer une autre classe interne = "row" à l'intérieur, en enveloppant le contenu interne.

Voir "Imbrication": http://getbootstrap.com/docs/4.0/layout/grid/#nesting