테이블을 부트 스트랩 3에서 그리드로 존중시키는 방법은 무엇입니까?

Question

부트 스트랩 테이블은 col-xs-X 클래스가 정의되어 있어도 그리드를 존중하지 않습니다. 여기

은 (빨간색) 표는 (회색) 그리드와 일치하지 않는 방법을 보여줍니다 최소한의 예입니다 : 테이블이 컬럼에서 나타나기 때문에 http://jsfiddle.net/fm65v3e0/

.col-xs-1 { 
 
    background-color: #eee; 
 
    border: 1px solid #999; 
 
} 
 

 
th { 
 
    background-color: #fee; 
 
    border: 1px solid red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <div class="table-responsive"> 
 
     <table class="table"> 
 
      <tr> 
 
      <th class="col-xs-5"> 
 
       5-col header 
 
      </th> 
 
      <th class="col-xs-3"> 
 
       3-col header 
 
      </th> 
 
      <th class="col-xs-4"> 
 
       4-col header 
 
      </th> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

그 바깥쪽에 일정량의 패딩이 있습니다. 열에서 패딩을 제거하면 표가 위로 늘어나지 만 물론 열 내의 모든 텍스트는 다음 열에 대해 플러시됩니다.

또한 기본적으로 부트 스트랩 테이블의 너비는 100 %이며 모든 12 개의 열을 사용하지 않으면 "여유 공간"을 할당합니다.

내 사이트가 거의 모든 테이블 형식의 데이터이므로 내 표가 그리드를 존중하지 않으면 그리드를 전혀 사용하지 않는 것처럼 보입니다. 내가 쉽게 해결할 수 있다고 생각하니? 이 문제를 해결하고 해결하는 것이 실수입니까?

Answer 1

부트 스트랩 CSS는 col-xx-xx 개의 모든 요소에 padding-right: 15px 및 padding-left: 15px을 추가합니다.

패딩을 제거하거나 다시 정의하면 모든 것이 적절하게 정렬됩니다. 아래 이미지는 패딩이 제거되었을 때 Bootply에서 일어나는 일을 보여줍니다.

.no-padding { 
    padding-left: 0; 
    padding-right: 0 
} 

당신이 패딩을 적용하지 않을 요소에 적용 :이 메소드를 오버라이드 (override) 할

한 가지 방법은과 같이 no-padding라는 클래스를 만드는 것입니다. Here's an updated JS Fiddle showing this.