다양한 화면 크기의 부트 스트랩 그리드 조합을 이해할 수 없습니다.

Question

codeply.com에서 코드 스 니펫 하나를 발견하고 col-xl, col-lg, col-sm 및 col-xs의 조합을 이해하기 위해 약간 수정했습니다. 다음은 코드 스 니펫입니다.

http://www.codeply.com/go/bipCPFM4mU

나는 부트 스트랩 초보자입니다. 따라서 코드 스 니펫이 잘못된 방식으로 구현되어 있고 결과가 예측할 수없는 경우 알려 주시기 바랍니다. 여기에 내 질문이있다 :

1. 마지막 3 divs (1.1 용 div, 1.2 용 4.2 및 1.3 용 div ... 1.3)에는 2 개의 xl 사양 즉 col- xl-3 및 col-xl-6 인 경우 col-xl-3이 아닌 col-xl-6 만 고려하는 이유는 무엇입니까 (xl 화면)? 나는 순서를 바꾸려고했지만 출력에는 차이가 없었다. 모든 * .1 섹션과 * .2 섹션은 첫 번째 행에 있었고 * .3은 두 번째 행에있었습니다.
2. 출력을 다른 창에서 열고 너비를 조정하여 화면 크기를 lg으로 만들면 1.3, 2.3, 3.3 및 4.3이 사라집니다. 나머지 요소는 어떻게 열 크기를 계산합니까? 나는 col-lg에 대해 아무 것도 지정하지 않았기 때문에 그들이 전체 너비를 취한다고 가정하고있다.

제 질문에 도움이되기를 바랍니다. 여러 가지 예를 살펴 보았지만 내 질문에 대답하지 못하고 행동하는 방식이 왜 행동하는지 이해하도록 도와줍니다.

누군가 도와 드릴 수 있습니까?

는 얀트 감사

Answer 1

1. 동일한 크기의 범주에서이 명 선언을 포함 할 수 없습니다 - 그래서 항상 한 그들로가 발생합니다 XL 폭에 3 열 6 열을 선언, XL를 정말 폭 선언입니다. 제 생각에는 아마 오타이고 col-xl-3 col-lg-6 col-sm-12이어야합니다.

2. 그들은 사라지지 않았으며, 화면 크기에서 전체 너비이고 그 앞에 떠있는 5.3으로 숨겨져 있습니다. Class = "row"에 5.3을 포함하거나 명확하게 지정하면 두 스타일 모두 1.3 - 4.3을 다시 볼 수 있습니다.

부트 스트랩 레이아웃은 클릭 할 때까지 처음에는 머리를 감기가 어렵습니다.

희망이 도움이됩니다.