4 열이있는 부트 스트랩 그리드 시스템

부트 스트랩 그리드가있는 사이트를 만들려고합니다. 거기에 행이 있고 그 안에 4 열이 있습니다.4 열이있는 부트 스트랩 그리드 시스템

<body> 

    <div class='container-fluid'> 

    <div class='row'> 

     <div class='col-xs-9'> 

     </div> 

     <div class='col-xs-1'> 

     </div> 

     <div class='col-xs-1'> 

     </div> 

     <div class='col-xs-1'> 

     </div> 

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

작은 화면 너비에서 열이 끊어지지 않을 것으로 예상했습니다. 그러나 작은 장치에서는 마지막 열이 끊어집니다. 그게 기대 되는가 아니면 뭔가 빠졌는가?

Plunker 링크 : https://plnkr.co/edit/e9PXa97nnQaBSqXVVbHh?p=preview

출처

2017-05-14 JmRag

는 현재 부트 스트랩 열 패딩 다루고있다.

.col-xs-1 { 
    [ ... ] 
    padding-right: 15px; 
    padding-left: 15px 
}

그리고 당신은 또한 재산

border: 1px solid grey;

를 추가 그래서, 아무리 당신이 무엇을, 당신의 div 항상 (2 * 15 + 2 * 1) = 32px의 최소 수평 치수가 없습니다 : 부트 스트랩 CSS의 국가는

주 . 브라우저 관리자에서 div의 실제 내부 너비가 어느 시점에서 0임을 알 수 있습니다.

수정은 매우 명백하다 : 당신도 마지막 픽셀을 짜낼 수 있도록 패딩을 제거하거나 row 클래스가하는 것처럼, 음의 마진을 추가하고이 borderoutline로 교체.

편집 : 외곽 부분은 과도한 종류입니다. 패딩을 제거하면 정상적으로 작동합니다.

출처

2017-05-14 11:56:39

4 열이있는 부트 스트랩 그리드 시스템

답변

관련 문제