부트 스트랩에서 "col-md-4", "col-xs-1", "col-lg-2"의 숫자 의미
답변:
부트 스트랩 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 개 이상의 열을 포함 하면 실제로 괜찮습니다 . -이는 논쟁의 여지가 있으며 모든 사람이 동의하는 것은 아닙니다.
.col-xs-2.col-sm-2.col-lg-7들어와 같습니다. col-xs-2.col-lg-7
.cols에 .row방지하는 방법과 패딩을 cacel. 나는 항상 행을 사용해야하는 이유와 그 차이점을 궁금합니다.
부트 스트랩 그리드 시스템에는 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-xs-*찬성 부트 스트랩 4에서 삭제 된col-*
요점은 이것입니다 :
col-lg-* col-md-* col-xs-* col-sm 이 서로 다른 화면 크기에 몇 개의 열이 있을지 정의하십시오.
예 : 데스크톱 화면과 전화 화면에 열이 col-md-6두 개 col-xs-6있으면 열에 두 개와 두 개의 클래스가 있습니다.
당신이 원하는 경우 전화 화면에서 바탕 화면에 두 개의 열과 하나의 열이있을 수 있습니다 (즉, 두 개의 행 서로 위에 쌓인) 당신은 넣어 two col-md-6두 col-xs-12당신의 열의와 합이 24이 될 것이기 때문에 그들은 서로의 상단에 자동 스택을 것입니다 다른 xs스타일을 그대로 두십시오 .
에서 트위터 부트 스트랩 문서 :
- 작은 격자 (≥ 768px) =
.col-sm-*, - 중간 눈금 (≥ 992px) =
.col-md-*, - 큰 격자 (≥ 1200px) =
.col-lg-*.
여기 요
col-lg-2 : 화면이 큰 경우 ( lg )이 구성 요소는 2의 공간을 차지합니다. 요소는 전체 행이 12 개의 요소를 수용 할 수 있다는 점을 고려 요소 (대형 화면에서는이 구성 요소가 16 %의 공간을 차지함)
col-lg-6 : 화면이 큰 경우 ( lg )이 구성 요소는 6의 공간을 차지합니다. 요소는 전체 행이 12 개 요소에 적합하다는 점을 고려 요소의 적용되면 구성 요소가 행에서 사용 가능한 공간의 절반을 차지했음을 알 수 있습니다.
위의 규칙은 화면이 큰 경우에만 적용됩니다. 화면이 작 으면이 규칙이 삭제되고 행당 하나의 구성 요소 만 표시됩니다.
아래 이미지는 다양한 화면 크기 너비를 보여줍니다.
