부트스트랩의 "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에만 적용됩니다.

일단 글자(xs, sm, md, lg)는 무시하고 숫자로만 시작하겠습니다...

• 숫자(1-12)는 모든 div의 전체 너비의 일부를 나타냅니다.
• 모든 div는 12개의 열로 나뉩니다.
• 그렇게,col-*-6 있음의 절반), 열 12개 6개 (폭에절)col-*-12 중 너비)에 있습니다. etc12는 12열(전체 너비)입니다.

따라서, 두 개의 동일한 열이 div에 걸쳐 있기를 원한다면,

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

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

<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가 아닙니다). 공격하는 디브가 다음 행으로 부딪힐 것이기 때문입니다(그렇지 않습니다).row그것은 완전히 다른 이야기입니다).

열 내에 열을 중첩할 수도 있습니다(가장 적합한 경우:.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 패딩이 있으며, 15의패 합니다. 당신은 보통 중첩된 열을 랩으로 감아야 합니다..row의 마진이 -15도의 마진입니다.이렇게 하면 패딩이 중복되는 것을 방지하고 중첩된 콜 클래스와 중첩되지 않은 콜 클래스 사이에 내용이 정렬된 상태를 유지할 수 있습니다.

당신은 특별히 그것에 대해 묻지 않았습니다.xs, sm, md, lg사용법, 하지만 그들은 손을 잡고 가기 때문에 저는 그것에 손을 대지 않을 수 없습니다...

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

• xs = 초소형 스크린(휴대폰)
• sm = 작은 화면 (계속)
• md = 중간 화면(일부 데스크톱)
• lg = 대형 화면 (데스크탑 포함)

자세한 내용은 공식 부트스트랩 설명서의 "그리드 옵션" 장을 참조하십시오.

일반적으로 화면 크기에 따라 다르게 동작하도록 여러 열 클래스를 사용하여 div를 분류해야 합니다(이것이 부트스트랩 응답의 핵심입니다).예: 클래스가 있는 디브col-xs-6그리고.col-sm-4휴대전화 화면의 절반(수직기)과 태블릿 화면의 1/3(sm)에 걸쳐 있습니다.

<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 및 , 의 4열md 그리고, 비록.sm그리고.lg명시적으로 선언된 적 없음)

참고: 정의하지 않은 경우xs다음으로 기본 설정됩니다.col-xs-12 (계속,col-sm-6는 의폭 절반 입니다.sm,md그리고.lg 면화, 그나전너에서 xs화면).

참고: 사실은 당신의 경우 완전히 괜찮습니다..row열두 개 이상의 콜을 포함합니다. 콜이 어떻게 반응할지 알고 있는 한 이 항목은 논쟁의 여지가 있는 문제이며 모든 사람이 동의하는 것은 아닙니다.

에는 네 클래스가 .
xs (전화용)
sm (태블릿용)
md (데스크톱용)
) lg (대형 데스크톱용)

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

팁: 각 클래스는 스케일업되므로 xs와 sm의 너비를 동일하게 설정하려면 xs만 지정하면 됩니다.

좋아요, 답은 쉽지만 다음을 읽어보세요.

col-lg-는 column large를 나타냅니다.≥ 1200px
col-md-는 열 매체를 나타냅니다.≥ 992px
col-col-column - extra small을 나타냅니다.≥ 768px

이므로, 를 들어 "" "" " ""와 같은 것입니다. 예를 들어col-xs창이 768µs(모바일 장치 포함)보다 작을 때 요소를 대상으로 합니다.

시스템이 위해 아래 , 이저는 과 함께 사용합니다. 예를 들어 저는 또 한 그 과 리 시 드 저 보 습 니 만 사 함 합 이 니 용 다 께 는 예 서 에 었 다 들 를 이 지 미 기 주 는 지 여 하 스 위 동 작 어 템 아 해 의 이 게 떻 래 , 과 ▁i 저 ▁them col-lg-6페이지에서 그리드 시스템이 어떻게 작동하는지 보여주기 위해, 어떻게 작동하는지 살펴봅니다.lg,md그리고.xs창 에 대응합니다.

요점은 다음과 같습니다.

col-lg-* col-md-* col-xs-* col-sm화면 크기가 서로 다른 경우 몇 개의 열을 가질 것을 정의합니다.

두하려면 두 의 열: 예바탕 화 면 과 전 화 개 표 열 면 려 두 개 표 니 다 합 시 열 을 의 하 시 을 의 두 에 화 면 ▁two ▁example : 다 니 ▁if 예 ▁put ▁screens :col-md-6col-xs-6클래스를 입력합니다.

바탕 화면에 두 개의 열이 있고 전화 화면에 한 개의 열(즉, 두 개의 행이 서로 겹쳐져 있음)만 있기를 원하는 경우two col-md-6col-xs-12 될 것이기 으로 쌓이거나 당의가열에 24될것때이문 24그기들서에로은위다에것니입자동떠날으나그쌓냥이거로신합이그서리고▁leave▁in▁auto▁will다▁on▁stack니▁just▁and▁or▁will것입▁they▁sum▁because▁your▁columns,▁other당날▁24▁top▁be를 남깁니다.xs유행에 뒤떨어지다

Twitter 부트스트랩 설명서에서:

• = 소형그표 (준 768ppm) =.col-sm-*,
• medium grid, 992㎜) = (992 =.col-md-*,
• = 대형그1200드(ppm리) =.col-lg-*.

자세히 읽어보기...

여기 있어요.

col-lg-2 : 화면이 큰 경우(lg) 전체 행이 12개 요소를 수용할 수 있다는 점을 고려하여 이 구성 요소는 2개 요소의 공간을 차지합니다(따라서 큰 화면에서 이 구성 요소가 행의 16% 공간을 차지하는 것을 알 수 있습니다).

col-lg-6 : 화면이 큰 경우(lg) 전체 행이 12개 요소를 수용할 수 있다는 점을 고려하면 이 구성 요소는 6개 요소의 공간을 차지합니다. 적용 시 구성 요소가 행에서 사용 가능한 공간의 절반을 차지하는 것을 볼 수 있습니다.

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

아래 이미지는 다양한 화면 크기 폭을 보여줍니다.

제가 할 수 있는 가장 간단한 단계별 설명입니다.

col-md-6다음을 의미합니다.

• 이 클래스를 배치하는 하위 요소,
• 12개의 열 중 6개의 열을 사용하여 모체 요소 내부를 차지할 것입니다.
• 화면 크기가 px768≥(중간 크기 화면) 이상일 때.

부트스트랩(5.1)에서는 다음을 수행합니다.

• 그리드 시스템에는 모든 요소와 모든 요소에 대해 12개의 열을 사용할 수 있습니다.
• 이러한 12개의 열은 (예상대로) 상위 요소에서 발견되며, 하위 요소는 해당 숫자(이 예에서는 6개)와 함께 사용하도록 지정된 만큼의 열을 차지합니다.

코드에서 다음과 같은 것을 볼 수 있습니다.

<div class="row" id="parent">
    <div class="col-12 col-md-6" id="child">
        Content.
    </div>
</div>

col-12의 화면 인 768보다 .

링크:

• 그리드 시스템
• 중단점

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