저는 5 행 2 열에 10 개의 블로그 게시물을 보여주는 블로그 홈페이지를 구축하고 있습니다. 각 열은 너비의 50 %를 차지하고 왼쪽으로 떠 있습니다. 부트 스트랩의 그리드를 사용했다면 .col-md-6각 블로그 기사에 사용할 것입니다.
특이점을 사용하여 이것을 어떻게 달성합니까?
@include add-grid(1 1); // Defines a grid of 2 columns
article {
@include grid-span(1,1);
}
여기에서는 기사를 첫 번째 열에 배치하도록 지시합니다. 내가 스패닝하는 위치에서 독립적 인 그리드 클래스를 생성하려면 어떻게해야합니까?
다음과 같이 내 CSS를 수행합니까?
article {
width: 50%;
float: left;
}
이 동작을 달성하기 위해 모든 블로그 게시물에 대해 단일 클래스를 사용하고 싶습니다.
Bootstrap은 Singularity가 Float 출력 스타일 이라고 부르는 것을 사용합니다 . Singularity 1.2 이상에서는 @include sgs-change('output', 'float');. 뿐만 아니라 grid-spanSingularity와 함께 제공되는 출력 스타일은 각 출력 스타일이 약간 다른 멘탈 모델을 가지므로 출력 별 스팬 믹스 인을 제공합니다. float-spanFlout 출력 스타일의 범위이며, 대칭 그리드에서 서로 마주 보는 여러 항목에 적합합니다.
부트 스트랩에는 현재 유동 거터가 아닌 고정 거터가 있으므로 Singularity의 거터를 0으로 설정하거나 고정 너비 거터의 경우 고정 수 ( padding내부 추가로 수행 )로 설정해야합니다. 패딩을 추가하는 경우 항목의 상자 모델을 border-box.
한 가지 차이점은 진행하는 방법 중 하나를 고려해야한다는 점입니다. 각 행의 첫 번째 항목은 모든 것이 떠 다니는 방향을 지워야한다는 것입니다 (이 경우에는 clear: left. nth-of-type(odd)하지만 유형은 클래스가 아니라 태그이며 원하는 결과를 정확히 생성하지 못할 수 있습니다 (사용 사례의 약 90 %에 해당). 이렇게하지 않으면 크기가 다를 가능성이 있습니다. 내용은 어색한 행을 만듭니다.
이 모든 것에 대한 데모는이 SassMeister 예제를 참조하십시오 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다