반응형 코딩시 가로배열

반응형 코딩시 가로배열

QA

반응형 코딩시 가로배열

본문

반응형으로 코딩을 할때 예를들어

<div class="col-lg-6"> 같은 형식으로 코딩을 하면 화면크기에 따라서

큰 화면은 한줄에 2개씩 보이다가 모바일 사이즈에서는 한줄로 보이게 되는데요.

이것을 가로100% 에 맞춰서 이미지 사이즈가 줄어들면서 한줄에 똑같이 2개씩

보이게 하려면 어떻게 해야 하나요?

 

마찬가지로 가로폭에 맞춰서 사이즈에 상관없이

<div class="col-lg-3"> 이면 한줄에 4개씩

<div class="col-lg-4"> 이면 한줄에 3개씩

<div class="col-lg-6"> 이면 한줄에 2개씩 보이게 하고 싶습니다.

 

 

이 질문에 댓글 쓰기 :

답변 3

클래스명을 보면 부트스트랩을 이용하시는거 같습니다.

부트스트랩 3 기준으로 col-xs-6 바꾸시면 모바일~PC 사이즈까지
2 column으로 보이게 됩니다. 

img 태그에는 img-responsive를 클래스에 추가해 주시면 반응형 처리 됩니다.

답변 감사드립니다. 말씀하신대로 col-xs-4 로 바꾸니 한열에 3개씩으로 보여지는데, 문제는 이미지 크기 때문인지 가로폭이 일정 사이즈 이하로 줄어들면 이미지가 한줄 아래로 떨어집니다.
3열 (col-xs-4)로 배열했을때, 가로폭이 최소인 경우에도 이미지 사이즈가 각 열의 크기를 넘기지 않고 열 크기에 맞춰 조정되고 3열이 유지되게 하는 방법이 있을까요?

답변을 작성하시기 전에 로그인 해주세요.
전체 59,303
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT