부트 스트랩에 새로운 것이므로 기존 페이지를 부트 스트랩 태그로 변환하려고 시도합니다.페이지를 응답으로 만들기 위해 모든 col-xx-xx 클래스를 지정해야합니까?
제 질문은 그리드와 관련이 있습니다. 이 페이지에서 http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works/은 지원하려는 최소 장치 너비에 대해서만 클래스를 사용해야한다고 말합니다.
휴대 기기, 태블릿, 중간 크기의 화면 및 대형 화면을 지원하려면 col-sm-xx 만 입력하면됩니까? 내가
<div class="col-sm-6">...</div>
에 사업부를 설정할 수 있지만 col-md-xx 및 col-lg-xx 중단 점을 칠 때이 같은 행동을 할 경우
?
그렇다면 왜 md 클래스와 lg 클래스가 필요합니까?
col-6 클래스의 요소는 모든 화면에서 휴대 기기 또는 데스크톱에서 화면의 절반을 차지하며 중요하지 않습니다. 그리고 Bootstrap은 사용자 정의 중단 점을 제공하므로 col-sm-6과 같은 클래스를 작성할 수 있으며이 규칙은 소형 장치에만 적용됩니다. 사용자 정의 부트 스트랩의 중단 점 및 해상도 봐 :
이 옵션은 개발자가 모든 중단 점에서 자신의 그리드를 변경할 수 있도록 만들어졌습니다.
대답은 예입니다. 그러나 그리드 표시 방법에 따라 md 또는 lg 개의 중단 점을 사용할 수도 있습니다. 예를 들어, 3 열 크기가 태블릿 (어쩌면 iPad)과 데스크톱에서 볼 수있을 정도로 충분히 큽니다. 그러나 휴대 전화에 3 개의 열을 표시하는 것은 의미가 없으며 열에 1 개의 사진을 조정해야합니다. 그래서 부트 스트랩에게 각 사진에 col-md-4 그리드를 보여달라고 말했지만 col-sm-12.
<div class="row">
<div class="col-xs-12 col-md-4">photo here</div>
<div class="col-xs-12 col-md-4">photo here</div>
<div class="col-xs-12 col-md-4">photo here</div>
</div>
예를 들어 질문에 답해 드리겠습니다. 이렇게하기 전에 기본적으로 div 요소의 너비는 100 %이거나 부트 스트랩 클래스의 경우 응답하는 계층의 각 col-XX-12 클래스와 같습니다.
부트 스트랩 그리드 시스템이 작동하는 방식에 따라 자체 col-sm-6 등을 사용하여, 여기에 무슨이다 : 더 col-xs-XX 클래스가 없기 때문에 이
가) 열 너비가 기본값으로 사용됩니다
보통div 's, 일명 100 % b)
sm 해상도 단계 - 768px 이상부터 - 열은 부모 너비의 6/12 또는 50 %입니다. c) 고해상도 계층에 대한 다른 클래스가없는 경우에는 50 % 너비가 모든 해상도로 위쪽으로 전달됩니다.
귀하의 질문에 답하기 위해 왜 'col-md-6'또는 'col-lg-6'과 같이 더 높은 해상도의 계층에 사용되는 나머지 클래스가 필요한지 .. 물론 그렇지 않으면 해당 해상도의 계층에서 열 너비를 다른 너비로 변경하려고합니다.
또한 해상도가 동일한 경우 열 너비가 동일하면 중간 해상도 등급의 클래스를 건너 뛸 수도 있습니다.열의 너비가 768px에서 최대 1199px까지이고 열이 66 %를 소비하도록하려면 열 col-sm-6 col-lg-9을 사용하십시오. 중간에 col-md-6을 건너 뛰는 것은 값이 작은 해상도 계층에서 전달되기 때문입니다.
사이드 렛으로, 내가 언급 한 브레이크 포인트는 부트 스트랩 3에서 왔지만 부트 스트랩 4에서 변경되었습니다. 그러나 사용법은 동일하게 유지됩니다.
[부트 스트랩에서 col-md-4, col-xs-1, col-lg-2의 숫자 의미] (https://stackoverflow.com/questions/24175998/meaning-of-numbers- in-col-md-4-col-xs-1-col-lg-2-in-bootstrap) – BenM