행/열을 사용하지 않는 부작용?

Question

3 가지 가격이 포함 된 사이트의 가격 섹션을 개발하려고합니다. 맨 위에 헤더와 간단한 설명, "가격", "같은 가격 책정 계획이 있어야한다 :

<section id="pricing"> 
    <div class="container"> 
    <h2>Pricing</h2> 
    <p>The pricing plans</p> 
     <div class="row"> 
      <div class="col-md-4"></div> 
      <div class="col-md-4"></div> 
      <div class="col-md-4"></div> 
     </div> 
    </div> 
</section> 

이제 내가 본 사람들이 1 행 있어야하는 물건을 넣어가/.

<section id="pricing"> 
     <div class="container"> 
      <div class="row"> 
      <div class="col-xs-12"> 
       <h2>Pricing</h2> 
       <p>Here are our pricing plans</p> 
      </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-4"></div> 
       <div class="col-md-4"></div> 
       <div class="col-md-4"></div> 
      </div> 
     </div> 
</section> 

을하지만 당신이 볼 경우, 하나의 col-xs-12 reduntant있는 행을 참을 수 없어 : 1 열 나는 부트 스트랩 "규칙"을 따라하는 경우, 직접 용기 내부에, 위와 같이, 그럼 내가 할 거라고? source of the Bootstrap home page의 경우 container 안에 바로 <p> 태그가 표시되지만, 여기서는 <h2> 및 <p>t 컨테이너 안의 유일한 것들은 아니며, 그 다음 행이 있습니다.

제 질문은 "규칙을 따르고"두 번째 예제를 사용하는 첫 번째 예제를 사용하는 의도되지 않은 부작용이 있습니까?

Answer 1

부트 스트랩 그리드 프레임 워크는 적절한 배치를 위해 패딩과 여백에 의존합니다. .row 또는 .col-*-*을 생략하면 정렬 문제가 발생합니다. 다음 코드를 고려하십시오

.default { 
 
    background: blue; 
 
    color: white; 
 
} 
 
    
 
.no-column { 
 
    background: gray; 
 
} 
 
    
 
.no-row { 
 
    background: yellow; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 default"> 
 
     <p>A paragraph within a col-12 element</p> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <p class="no-column">A paragraph with no column wrapper.</p> 
 
    </div> 
 
    
 
    <p class="no-row">A paragraph with no column or row wrapper.</p> 
 
</div>

우리는 부트 스트랩의 프레임 워크를 다음 그리드 요소가 첫 번째 예에서는; 텍스트는 .container-fluid 요소의 일부인 행에 랩핑 된 열 내에 랩됩니다.

모든 것이 예상대로 정렬됩니다.

두 번째 예에서는 열을 생략합니다. 즉시 우리는 .col-*-*으로 생성 된 패딩을 잃고 단락 프레스는 컨테이너의 가장 왼쪽 마진에 맞 춥니 다.

세 번째 예제에서 우리는 열뿐 아니라 행 클래스도 생략합니다. 보시다시피 간격의 차이가 더욱 극단적입니다.