[이윰] 반응형 테마 PC에서 메인과 사이드 레이아웃 위치 변경하기

페이지 정보

루루아빠 2,506 2016.11.22 22:49

평점

  • 평점 : 0점 (0명 참여)

본문

반응형 테마 - PC에서 메인은 오른쪽, 사이드는 왼쪽에 위치하고 모바일에서는 메인이 위쪽, 사이드는 아래쪽에 위치
1. 사이드 레이아웃 설정은 이윰환경설정에서 오른쪽으로 설정한다.

2. 그누보드5/eyoom/theme/설치된 테마/layout/head_bs.html 를 열어 아래 예제처럼 사용자 임의의 class(예:main-box)를 추가한다.

<div class="basic-bs-main {? eyoom.pos_side_layout == 'left'}right{:}left{/}-main col-md-9 main-box"> 

3. 그누보드5/eyoom/theme/설치된 테마/layout/side_bs.html 를 열어 아래 예제처럼 사용자 임의의 class(예:side-box)를 추가한다.

<div class="basic-bs-main {? eyoom.pos_side_layout == 'left'}right{:}left{/}-main col-md-9 side-box"> 

4. 그누보드5/eyoom/theme/설치된 테마/css/custom.css 에 아래와 스타일 정의를 추가한다.

@media (min-width:992px){
    .main-box {float:right !important}
    .side-box {float:left !important}
} 
메인과 사이드 레이아웃(col-md-9, col-md-3) 각각의 클래스명에 flaot 속성 스타일을 줘서 디바이스 화면 넓이 992px 이상에세 메인 레이아웃은 오른쪽으로 사이드 레이아웃은 왼쪽으로 위치하게 만든다.
991px 이하에서는 콘텐츠의 위치에 따라 메인이 먼저 위에 위치하게 된다.
레이아웃 반대의 경우 float속성을 반대로 하면 되며 변경에 따라 스타일은 맞게 수정하면 된다.
추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,295,334
레벨 97
경험치 1,399,531

Progress Bar 10%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요

Total 242513 페이지
제목 글쓴이 날짜 조회 추천
이윰  댓글+1🏆 카테고리를 사용하는 게시판에서 무한스크롤 사용시 루루아빠 2015.08.07 2,926 0
이윰  🏆 new 이미지를 출력하는 시간을 늘리기 루루아빠 2015.07.28 2,920 0
이윰  🏆 쪽지 보내기 textarea(쪽지내용) 높이 키우기 루루아빠 2015.09.24 2,919 0
이윰  🏆 모바일에서 btn-e-xs 버튼 크기로 간격 조절 루루아빠 2015.10.09 2,918 0
이윰  🏆 Eyoom Builder 1.2.3 패치 루루아빠 2016.03.29 2,915 0
이윰  🏆 이윰빌더 태그 입력시 작은 따옴표(apostrophe)가 포함되면 삭제 안되는 문제 루루아빠 2016.02.26 2,910 0
이윰  🏆 Eyoom Builder 1.2.2 패치 루루아빠 2016.02.18 2,909 0
이윰  🏆 무한스크롤을 사용하는 게시판에서 검색시 나타나는 버그 수정하기 루루아빠 2015.08.17 2,906 0
이윰  🏆 특정 Div 클래스 전체를 링크 걸기 루루아빠 2017.04.29 2,900 0
이윰  🏆 상단바 특정 메뉴 레벨에 따라 감추기 루루아빠 2015.05.22 2,900 0
이윰  🏆 이윰 레벨업 관련 push(푸시) 메세지 오류 루루아빠 2015.06.15 2,887 0
이윰  🏆 Eyoom Builder 1.1.8 패치 루루아빠 2015.07.24 2,886 0
이윰  🏆 "카테고리"별 게시글 갯수 나타내기 루루아빠 2015.04.24 2,885 1
이윰  🏆 댓글에 이미지가 추가된 댓글을 수정할 경우 이미지가 삭제되는 버그 패치 루루아빠 2015.08.07 2,873 0
이윰  🏆 사이드바 없애기 루루아빠 2015.04.22 2,871 1
이윰  댓글+1🏆 Eyoom Builder 1.1.1 패치 루루아빠 2015.05.24 2,868 0
이윰  🏆 샵커뮤니티 테마 스위쳐 패치 루루아빠 2015.06.25 2,865 0
이윰  🏆 반응형 이미지를 위한 태그 루루아빠 2015.04.29 2,859 1
이윰  🏆 Eyoom Builder 1.3.5 패치 루루아빠 2017.11.21 2,854 0
이윰  🏆 인기검색어 관련 설정 바꾸기 루루아빠 2015.09.12 2,852 0