>

부트 스트랩을 처음 접했고, 부트 스트랩이 12 열 그리드를 어떻게 사용하는지 이해합니다. 부트 스트랩 그리드를 활용하려면 전통적으로 다음과 같이하십시오.

<div class="row">
    <div class="col-md-6">
    ...
    </div>
    <div class="col-md-6">
     ...
    </div>
</div>

또한 다른 화면 크기에 다른 열 크기가 사용된다는 것을 이해합니다

<div class="row">
    <div class="col-xs-6">
    ...
    </div>
    <div class="col-xs-6">
    ...
    </div>
</div>

그러나 많은 사람들이 이와 비슷한 일을하는 것을 보았습니다 :

<div class="row">
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
</div>

여러 열 크기를 사용하는 이유는 무엇입니까? 브라우저가 사용하기에 적합한 것을 감지합니까?

  • 답변 # 1

    이 예제에서 세 클래스를 모두 가질 이유는 전혀 없습니다 :

    <div class="row">
        <div class="col-xs-6 col-md-6 col-lg-6">
        ...
        </div>
        <div class="col-xs-6 col-md-6 col-lg-6">
        ...
        </div>
    </div>
    
    

    이것은 사실상 다음과 같습니다 :

    <div class="row">
        <div class="col-xs-6">
        ...
        </div>
        <div class="col-xs-6">
        ...
        </div>
    </div>
    
    

    부트 스트랩 그리드 클래스는 지정된 크기보다 큰 모든 크기에서 작동하므로 col-xs-6 를 적용하십시오.  그 요소는 sm, md 등과 같은 더 큰 화면 크기에서 6 개의 열을 포함합니다. 첫 번째 예에서 세 가지 클래스를 모두 포함하는 사람은 부트 스트랩 그리드 시스템의 작동 방식을 제대로 이해하지 못하고 있다고 추측합니다 .

    요소가 다른 화면 크기에서 다른 크기가되도록하려면 여러 클래스 만 포함하면됩니다.

    <div class="row">
        <div class="col-xs-4 col-md-3 col-lg-2">
        ...
        </div>
        <div class="col-xs-8 col-md-9 col-lg-10">
        ...
        </div>
    </div>
    
    

  • 답변 # 2

    여러 col  크기는 여러 유형의 화면에 적용됩니다 :

    와이즈 비즈 와이즈 비즈 : 초소형 화면 (휴대 전화)

      

      : 태블릿과 같은 화면

        

      xs : 데스크톱과 같은 화면

        

      sm : 더 큰 데스크톱 화면

        

    기본적으로 이것들은 다양한 md 에서 정의 될 것입니다   lg 의 쿼리  브라우저가 어떤 것을 사용할지 감지하는 데 도움이됩니다.

    여기에서 자세히 알아보기

    <시간>

    부록

    다른 media 의 사용  위에서 언급 한 클래스는 화면마다 다른 열 크기를 지정하는 유일한 상황이어야합니다. 예를 들어 : 12 bootstrap.css 를 원한다면  와이즈 비즈 , 6 개 col  와이즈 비즈 , 3 위즈 위즈  와이즈 비즈  그리고 2 개의 col  와이즈 비즈 그런 다음 xs 로 사용할 수 있습니다. . 그렇지 않으면 모든 화면에서 동일한 화면이 표시되면 col 에서와 같이 위의 화면을 사용할 수 있습니다 . 이것은 브라우저에 6 sm 를 사용하도록 지시합니다  화면 크기에 관계없이

  • 답변 # 3

    아이디어를 얻기 위해이 페이지를 살펴보십시오

    http://getbootstrap.com/examples/grid/

    일반적으로 여러 col 클래스를 사용하는 아이디어는 화면 크기에 따라 다른 너비 비율을 사용하는 것입니다.

    예 :

    요소에 col-md-6 및 col-xs-12를 추가하면 화면 크기가 중간 중단 점에 가까워지면 6 개의 열이 사용되지만 화면 크기가 작 으면 전체 너비가 사용됩니다.

  • 답변 # 4

    이 방법은 일반적으로 화면 크기에 사용됩니다. 따라서 7 인치 화면에서 7 열로 끝나지 않습니다. 예를 들어; col 와 함께  휴대 전화에 1 열, 큰 태블릿에 3 열, 데스크톱 모니터에 6 열을 사용할 수 있습니다.

    md

관련 자료

  • 이전 php - MySQL과의 날짜 차이를 기반으로 행을 삭제하는 방법은 무엇입니까?
  • 다음 android - 장치 정책 관리자가 장치 정책을 검색 할 수 없습니다