내 Bootstrap XS 열이 매우 작은 화면 크기에서 잘못 래핑되는 이유는 무엇입니까?

Bootstrap XS 열 줄 바꿈 문제 수정

Bootstrap의 그리드 시스템은 화면 너비가 유난히 작아지면 마지막 XS 크기 열이 부적절하게 줄 바꿈되는 문제에 직면할 수 있습니다. 최대 12개까지 추가하도록 열을 구성하더라도 정렬 동작이 기대에 미치지 못할 수 있습니다.

예를 들어 다음 코드를 고려해보세요.

<code class="html"><div class="container">
    <div class="row">
        <div class="col-xs-2"></div>
        <div class="col-xs-1 col-xs-offset-8"></div>
        <div class="col-xs-1"></div>
    </div>
</div></code>

일반적으로 화면 크기를 줄이면 마지막 열은 화면 끝에 수직으로 쌓여야 합니다. 그러나 화면이 중요한 임계값을 넘어 줄어들면서 열이 예기치 않게 시작 부분으로 줄바꿈됩니다.

일부 사용자는 컨테이너의 최소 너비를 지정하기 위해 CSS 코드를 추가하는 것을 고려했습니다. 그러나 Bootstrap에는 대체 솔루션이 있습니다.

문제 설명

이 동작은 GitHub(https://github.com/twbs)에 문서화된 알려진 문제에서 비롯됩니다. /bootstrap/문제/13221). 화면 너비가 360px보다 좁은 경우 열 너비가 8.333333%로 설정되어 있고 양쪽 패딩이 15px이므로 .col-xs-1 열이 줄바꿈되기 시작합니다. 이러한 비대칭으로 인해 불일치가 발생하여 브라우저가 열을 쌓게 됩니다.

문제 방지

래핑을 방지하려면 .col-xs-1 사용을 삼가하세요. 매우 작은 화면. 또한 화면 크기가 실제로 360px 미만으로 조정될 가능성이 있는지 평가하세요. 대부분의 시나리오에서 이는 자주 발생하지 않습니다.

참고: Bootstrap 4에서는 .col-xs-1이 .col-1로 대체되었습니다.

관련 문제:

• [부트스트랩 그리드가 가장 작은 크기로 깨짐](https://stackoverflow.com/questions/21023320/twitter-bootstrap-3-grid-breaks-in -가장 작은 크기)

위 내용은 내 Bootstrap XS 열이 매우 작은 화면 크기에서 잘못 래핑되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!