부트 스트랩 4 그리드 시스템 문제

Question

table-> tr> td은 매우 간단하지만, 어쩌면 내가 4 그리드 시스템이 어떻게 작동하는지 부트 스트랩 모르는 container-fluid-> row-> col-* or col-*-*

내 문제와 거의 동일합니다. 의 내 아래의 문제를 살펴 보자

,

나는 다음과 같이 그룹에 div class=row에서 외부 div에 그들을 배치하여 세 가지 요소를 원하고이 부분 데모 예제 작업을 초래할 것이다. (당분간 제 맞춤 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>&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> 

외부 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>&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> 

문제를 무단 복제하는 행위는

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

Answer 1

첫째, 당신이 bootstrap.css 전에있는 style.css를로드하는 대신 (그냥 정확한 결과를 얻기 위해 출력 창을 최대화) after - 당신은 부트 스트랩 이후에 적절히 오버라이드 (override) 할 수 있도록 (듯이) 테마를로드 할 필요가 있습니다. 두 번째로는 부트 스트랩 j를 바닥 글에 포함시키지 않으므로 향상된 부트 스트랩 기능을 사용할 수 없습니다.

그러나 질문에 대답하기 위해 위의 '작동하는'예제는 제대로 수행하고 있기 때문입니다. 당신이 생각하는 것처럼 섹션 주위에 col-12 래퍼가 필요하지 않습니다. 원하는 경우, 내부 내용을 래핑하면서 내부 클래스 = "row"를 중첩해야합니다.

"중첩"참조 : http://getbootstrap.com/docs/4.0/layout/grid/#nesting