[html] 부트 스트랩 3의 그리드 클래스 (col-sm- # 및 col-lg- #) 이해

Program / 글쓴이

저는 Bootstrap 3에서 시작하고 있으며 그리드 클래스가 어떻게 사용되는지 이해하는 데 어려움이 있습니다.

지금까지 알아 낸 내용은 다음과 같습니다.

화면이 특정 크기 (각각 768px 및 992px) 이상일 때만 적용된다는 점에서 클래스 col-sm-#및 col-lg-#일반 이전 과 다른 것으로 col-#보입니다. -sm- 또는 -lg-를 생략하면 div가 하나의 열로 축소되지 않습니다.

나는 둘 다 그 행 내부에 두 개의 div의를 만들 때, col-sm-6그들이 보인다 에만 창이 넓은 768px와 992px 사이 일 때 나란히. 나는 모든 방법을 아래로 창을 축소 한 후 천천히 확대하는 경우 즉, 레이아웃은 다시 하나의 컬럼에, 다음, 두 개의 열 단일 열입니다 다시 .

  1. 이것이 의도 된 동작입니까?
  2. 768px 이상의 항목에 대해 두 개의 열이 필요하면 두 클래스를 모두 적용해야 합니까? ( <div class="col-sm-6 col-lg-6">)
  3. col-6 또한 포함 되어야합니까 ?<div class="col-6 col-sm-6 col-lg-6">

답변

[아래 업데이트]

나는 문서를 다시 봤는데 이것에 대해 구체적으로 말하는 섹션을 간과 한 것 같습니다.

내 질문에 대한 답변 :

  1. 예, 특정 너비 이상의 모든 항목이 아닌 특정 범위에만 적용됩니다.

  2. 네, 수업은 합쳐 져야합니다.

  3. col- # 클래스는 기본적으로 col-xsm- # 또는 0px 이상의 너비 (모든 너비)와 동일하기 때문에 특정 경우에는 적절하지만 다른 경우에는 적합하지 않습니다.

문서를 너무 빨리 읽는 것 외에는 “부트 스트랩 2 사고 방식”으로 부트 스트랩 3에 들어 왔기 때문에 혼란 스러웠습니다. 특히, v2와 v3에서 (선택적) 반응 형 스타일 (bootstrap-responsive.css)을 사용하고 있었는데 (더 나은 IMO를 위해) 상당히 다릅니다.

안정적인 릴리스를위한 업데이트 :

이 질문은 원래 RC1이 나왔을 때 작성되었습니다. 그들은 RC2에 몇 가지 주요 변경 사항을 적용 했으므로 지금 이것을 읽는 모든 사람에게 위에서 언급 한 모든 것이 여전히 적용되는 것은 아닙니다.

현재이 글을 쓰고있는 시점에서 col-*-#DO 클래스가 위쪽으로 적용되는 것 같습니다. 예를 들어 요소가 휴대폰의 경우 12 열 (전체 너비)이되고 태블릿 이상에서는 6 열 (반 페이지)이 두 개가되도록하려면 다음과 같이하면됩니다.

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(또한이 질문이 작성된 후에 추가 xs 중단 점을 추가했습니다.)

답변

여기 에 Bootstrap 3에서 새로운 그리드 클래스를 사용하는 방법을 설명하는 아주 좋은 튜토리얼이 있습니다.

믹스 인 등도 다룹니다.

답변

“768px 이상의 항목에 대해 두 개의 열을 원하면 두 클래스를 모두 적용해야합니까?”

이것은 다음과 같이 간단해야합니다. 

<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>
</div>

col-lg-6너무 추가 할 필요가 없습니다 .

데모 : http://www.bootply.com/73119

답변

이해하는 가장 좋은 방법은 단순히 위에서 아래로 생각하는 것입니다 (대형 데스크톱에서 휴대폰으로)

첫째, B3가 먼저 모바일이기 때문에 xs를 사용하면 열이 대형 데스크톱에서 xs까지 동일합니다 (모든 화면 크기에서 원하는 방식으로 모든 것을 유지하므로 xs 또는 sm을 사용하는 것이 좋습니다)

두 번째로 다른 장치 또는 해상도의 열에 다른 너비를 제공하려면 여러 클래스를 추가 할 수 있습니다.

위의 경우 화면 해상도에 따라 너비가 변경됩니다. 각 클래스의 총 열 = 12를 유지하고 있습니다.

내 대답이 도움이되기를 바랍니다!

답변

SDP의 답변을 위의 수정하려면 선언 할 필요가 없습니다 col-xs-12에서 <div class="col-xs-12 col-sm-6">. 부트 스트랩 3은 모바일 우선이므로 모든 div 열은 기본적으로 100 % 너비 div로 간주됩니다. 즉, “xs”크기에서는 너비가 100 %이며 설정에 관계없이 항상 해당 동작으로 기본 설정됩니다. sm, md, lg. 당신이 원하는 경우 xs열이 100 %로, 당신은 일반적으로 작업을 수행 col-xs-(1-11).

답변

우리 대부분이 BS4를 사용하고 있다고 생각하므로 늦을 수 있습니다. 이 기사는 귀하가 요청한 모든 질문을 자세하고 간단하게 설명했으며 언제 무엇을해야하는지도 포함합니다. bs4 또는bootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7

답변