css3 열이 화면 크기 변경시 부트 스트랩에서 축소되었습니다.

Question

저는 css3 열을 사용하여 게시물을 표시하는 워드 프레스 테마 usign 부트 스트랩을 개발 중입니다.

거기에 데스크탑에서 3 열, 중간 크기 화면 (예 : 태블릿)에서 렌더링해야하며, 작은 화면의 경우 2 열 및 1을 렌더링해야한다고 부트 스트랩하는 방법이 있습니까?

감사합니다.

Answer 1

특정 뷰포트 크기의 열이 얼마나 큰지 부트 스트랩에 알려주는 방법이 있습니다. 뷰포트 크기에 따라 열을 숨기거나 표시하도록 명령하는 방법도 있습니다. 로 작동 위의 코드는 다음과

<div class="col-lg-4 col-md-6 col-xs-12"> 
    Column1 Content 
</div> 

<div class="col-lg-4 col-md-6 hidden-xs"> 
    Column2 Content 
</div> 

<div class="col-lg-4 hidden-md hidden-xs"> 
    Column3 Content 
</div> 

: 예를 들어

데스크톱 장치가 표시됩니다 :

<!-- 33.3333% width for each column --> 

Column1 Content | Column2 Content | Column3 Content 

그리고 정제 중간 화면

<!-- 50% width for each column --> 

Column1 Content | Column2 Content 

그리고 마지막에에를 소형 화면 및 휴대 기기

<!-- 100% width column --> 

Column1 Content 

[hidden|visible]-[lg|md|sm|xs]을 사용하여 레이아웃을 조정하여 뷰포트 크기에 따라 열을 숨기거나 표시 할 수 있습니다.

http://getbootstrap.com/css/#grid-options
http://getbootstrap.com/css/#responsive-utilities

:

---

참조), 당신은이 그리드 클래스를 사용하여 달성 할 수있는 얼마나 많은 응답 상상