2014-04-25 3 views
2

일부 그룹화 된 데이터를 반복하고 그룹화를 기반으로 패널을 만드는 Angular JS 지시문이 있습니다. 나는이 패널들을 두 줄의 그룹으로 분리하는 데 어려움을 겪고있다. col-lg-6의 배치와 값을 편집 해 보았습니다. 또한 작업을 수행해야하는 일반 CSS 비트를 추가하는 일을했습니다. 누군가 http://plnkr.co/edit/cNFNAU?p=info에있는 기본 코드를보고 도움이되는 피드백을 제공해 주시겠습니까? style.css에서side-by-side 패널 지시문

+1

부트 스트랩 컨테이너를 사용하지 않고 부트 스트랩 행을 사용하는 것처럼 보입니다. 주문 매핑 컨테이너 클래스 포장을 시도하십시오

Iammesol

답변

3

기본적으로 50 %의 상기 요소의 폭을 설정 col-lg-6 때문에
margin: 10px; 

마진이 추가 될 때 ... 2 col-lg-6 년대 넓게 100 % 이상이고 ... 규칙 존재 행에 적합하지 않습니다. 여백을 제거하면 효과가 있습니다.

여백을 다시 추가하려면 col-lg-6 요소에 양수 수평 여백을 추가하지 않도록주의하면서 스타일이나 레이아웃을 가지고 놀아야합니다.

는 여기가 Plunker

+0

대단히 감사합니다! – Ronald91

1

내 생각에는이 두 가지 작업을 수행 할 수 있습니다 (이 plunker에서 제대로 표시되도록 XS에 LG 변경) 수정과이다.

쉬운 방법은 div에 float left 스타일을 사용하는 것이지만 패널 높이가 일치하지 않으면 공백으로 끝납니다. plunker

다른 하나는 지시어에서 div를 만들고 한쪽 패널과 다른 쪽 패널을 다른 패널에도 쌓아 넣는 것입니다. plunker