부트 스트랩을 사용하여 2 열 그리드에 다양한 가변 높이 내용이 포함 된 반응 형 웹 사이트를 만듭니다. 현재 모든 것이 기능적으로 훌륭하지만 한 행의 두 항목이 다른 높이에있을 때 발생하는 행 사이의 추악한 공백을 없애고 싶습니다. 두 개의 span6 디비전과 각각의 독립적 인 행을 사용하여 쉽게이 작업을 수행 할 수 있지만 문제는 작은 표시를 위해 스택하는 Bootstrap의 격자가 오른쪽 열 위의 왼쪽 열을 모두 스택하는 반면 정보는 왼쪽으로 흐르게해야한다는 것입니다. 오른쪽, 다음 위 아래.부트 스트랩 반응 형 모바일 레이아웃 순서 변경
솔루션 내가 찾은 다음 스레드
: 그 작업의
- Is it possible to create a pinterest-like layout with Bootstrap only?
- Bootstrap: How to change the order of div in fluid-row?
...뿐만 아니라 다른 몇 가지 모호한 답변 만 없음 페이지를 렌더링하는 방법에 대한 서버 측 변경을하지 않으려 고합니다. 대신, 만 HTML, CSS 및 JS로 수정하여이 문제를 해결할 수있는 방법이 있는지 알고 싶습니다. 즉, 전적으로 부트 스트랩에 관련된 솔루션을 찾고 싶습니다. HTML, CSS 및 JS에 대한 추가 사항은 모두 공개되어 있습니다.하지만 제가 말한 것처럼 서버 측은 없습니다.
나는 작업하고있는 것, 문제가 무엇인지, 그리고 내가 성취하고자하는 것을 시각화 한 표를 채웠다. http://i.imgur.com/AAl9ZBu.png에서 확인하십시오.
도움을 주셔서 대단히 감사합니다.
업데이트 : 내가 해결하기 위해 매우 간단한 아이디어를 제공 한이 : 모든 초에 중복으로 모바일 레이아웃을 바탕 화면 레이아웃을 수정하지만 나누기 솔루션에있는 두 개의 열 패러다임을 사용하여 그리드 아이템을 선택하고 그 둘 사이의 디스플레이를 토글 링합니다. 예를 들어 네 항목 그리드는 항목 2와 4가 표시되도록 설정된 왼쪽 열에 항목 1, 2, 3 및 4를 가지며 오른쪽 열에 항목 2와 4가 포함됩니다. @media (max -width : 767px)가 true가되면 왼쪽 열의 항목 2와 4가 토글되어 표시됩니다. 왼쪽 열 전체에 none이 적용됩니다.
이것은 아마도 가장 효율적인 효율적인 해결책 일 수 있으므로 귀하의 솔루션을 계속 읽고 싶습니다.
http://jsbin.com/ 또는 http://jsfiddle.net/에서 샘플을 제공하십시오. – Diode