부트 스트랩에서 "col-md-4", "col-xs-1", "col-lg-2"의 숫자 의미

부트 스트랩에서 "col-md-4", "col-xs-1", "col-lg-2"의 숫자 의미

---

새로운 부트 스트랩의 그리드 시스템, 특히 다음 클래스와 혼동됩니다.

col-lg-*
col-md-*
col-xs-*

여기서 *는 일부 숫자를 나타냅니다.

누구든지 다음을 설명 할 수 있습니까?

1. 그 숫자는 어떻게 그리드를 정렬합니까?
2. 이 숫자를 사용 하는 방법 ?
3. 그들이 실제로 무엇 을 나타내는가?

---

부트 스트랩 3에만 적용됩니다.

문자 (X 무시 들 , SM , MD , LG 전자 ) 지금을 , 난 그냥 숫자로 시작합니다 ...

• 숫자 (1-12)는 모든 div의 전체 너비의 일부를 나타냅니다.
• 모든 div는 12 열로 나뉩니다
• 따라서 col-*-612 열 중 6 열 (폭의 절반), col-*-1212 열 중 12 열 (전체 폭) 등

따라서 두 개의 동일한 열 이 div에 걸쳐 있도록하려면 다음을 작성하십시오.

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

또는 3 개의 동일하지 않은 열 이 동일한 너비에 걸쳐 있도록하려면 다음과 같이 작성할 수 있습니다.

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

열 수는 항상 최대 12 개임을 알 수 있습니다. 열이 12보다 작을 수 있지만, 열이 12보다 많으면 문제가되는 div가 다음 행으로 넘어갈 수 있으므로주의하십시오 .row.

다음 과 같이 columns 안에 열을 중첩 시킬 수 있습니다 ( .row래퍼가 가장 적합 함 ).

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

중첩 된 div의 각 세트는 상위 div의 최대 12 개 열까지 확장됩니다. 참고 : 각 .col클래스에는 양쪽에 15px 패딩이 있으므로 일반적으로 중첩 열을 .row-15px 여백이있는로 묶어야합니다. 이렇게하면 패딩이 중복되는 것을 방지하고 중첩 된 클래스와 중첩되지 않은 col 클래스 사이에 내용을 정렬 할 수 있습니다.

- xs, sm, md, lg사용법 에 대해 구체적으로 묻지는 않았지만 직접 사용하므로 도움을 드릴 수는 없습니다.

간단히 말해서, 클래스가 적용 할 화면 크기 를 정의하는 데 사용 됩니다.

• xs = 초소형 화면 (휴대 전화)
• sm = 작은 화면 (태블릿)
• md = 중간 화면 (일부 데스크톱)
• lg = 큰 화면 (나머지 데스크톱)

자세한 내용은 공식 부트 스트랩 문서에서 " 그리드 옵션 " 장을 읽으십시오 .

당신은해야 일반적으로 는 다르게 화면의 크기에 따라 (이 부트 스트랩 반응을 만드는 것의 핵심입니다) 다르게 동작하므로 여러 열 클래스를 사용하여 사업부를 분류합니다. 예를 들면 : 클래스와 사업부 col-xs-6및 col-sm-4휴대 전화 절반 화면 (XS)과 태블릿 (SM)의 화면의 1/3에 걸쳐됩니다.

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

참고 : 아래의 의견에 따라, 지정된 화면 크기에 대한 그리드 클래스는 화면 크기에 적용 큰 않는 또 다른 선언 무시를 (예 : col-xs-6 col-md-4스팬 6 열 xs 및sm , 및 4 열 md 하고lg ,에도 불구 sm하고 lg명시 적으로 선언하지 않았다)

참고 : 사용자가 정의하지 않는 경우 xs,이 기본값으로 설정됩니다 col-xs-12(즉, col-sm-6절반에 폭 sm, md그리고 lg에 스크린하지만, 전폭 xs스크린).

참고 :.row 반응이 어떻게 될지 알고있는 한 12 개 이상의 열을 포함 하면 실제로 괜찮습니다 . -이는 논쟁의 여지가 있으며 모든 사람이 동의하지는 않습니다.

---

부트 스트랩 그리드 시스템에는 4 가지 클래스가 있습니다 :
xs (전화)
sm (태블릿)
md (데스크탑)
lg (대규모 데스크탑)

위의 클래스를 결합하여보다 역동적이고 유연한 레이아웃을 만들 수 있습니다.

팁 : 각 클래스는 확장되므로 xs 및 sm에 대해 동일한 너비를 설정하려면 xs 만 지정하면됩니다.

좋아, 대답은 쉽지만 다음을 읽으십시오.

col-lg- 는 큰 ≥ 1200px
열을 나타 냅니다. col-md- 는 열 중간을 나타냅니다. ≥ 992px
col-xs- 는 매우 작은 열을 나타냅니다.≥ 768px

픽셀 번호는 중단 점이므로, 예를 들어 col-xs윈도우가 768px 보다 작은 경우 ( 예 : 모바일 장치) 요소를 대상으로합니다 .

나는 또한 같은 그리드 시스템의 작품이 예에서 나는, 3을 사용하는 방법을 보여 아래의 이미지를 만들었 col-lg-6을 보여 그리드 시스템 페이지에서 작업,보기 방법을 어떻게 lg, md그리고 xs창 크기에 반응입니다 :

---

요점은 이것입니다 :

col-lg-* col-md-* col-xs-* col-sm 이 서로 다른 화면 크기에 몇 개의 열이 있을지 정의하십시오.

예 : 데스크톱 화면과 전화 화면에 두 개의 열이있게하려면 열에 col-md-6두 개와 두 개의 col-xs-6클래스 를 넣습니다 .

당신이 원하는 경우 전화 화면에서 바탕 화면에 두 개의 열과 하나의 열이있을 수 있습니다 (즉, 두 개의 행 서로 위에 쌓인) 당신은 넣어 two col-md-6두 col-xs-12당신의 열의와 합이 24이 될 것이기 때문에 그들은 서로의 상단에 자동 스택을 것입니다 다른 xs스타일을 그대로 두십시오 .

---

From Twitter Bootstrap documentation:

• small grid (≥ 768px) = .col-sm-*,
• medium grid (≥ 992px) = .col-md-*,
• large grid (≥ 1200px) = .col-lg-*.

to Read More...

---

Here you go

col-lg-2 : if the screen is large (lg) then this component will take space of 2 elements considering entire row can fit 12 elements ( so you will see that on large screen this component takes 16% space of a row)

col-lg-6 : if the screen is large (lg) then this component will take space of 6 elements considering entire row can fit 12 elements -- when applied you will see that the component has taken half the available space in the row.

위의 규칙은 화면이 큰 경우에만 적용됩니다. 화면이 작 으면이 규칙이 삭제되고 행당 하나의 구성 요소 만 표시됩니다.

아래 이미지는 다양한 화면 크기 너비를 보여줍니다.

참고 URL : https://stackoverflow.com/questions/24175998/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap