CSS Grid 2 열이 올바른 위치에 없습니다.

다음 예제가 있습니다. Jsfiddle 여기에 12 개의 열과 필수 CSS를 모두 게시했습니다. 다음 코드 조각은 문제를 일으키는 코드라고 생각합니다. 실제 예제에서 320px 화면 너비보다 작은이 두 열은 컨테이너를 깨고 스크롤바가 나타납니다. 이 문제를 해결하기 위해 노력했지만 지금까지 해결책을 찾지 못했습니다. 나를 도울 수있는 사람은 누구입니까?CSS Grid 2 열이 올바른 위치에 없습니다.

<div class="col-mb-2 col-8 col-dt-5"><p>&nbsp;</p></div> 
<div class="col-mb-2 col-2 col-dt-8"><p>&nbsp;</p></div>

업데이트 : 추가 those two columns are move more than the rest

출처

2013-10-12 Bogdan

내가 유 때문에 COL 5-DT COL-DT-8이 두 열의 제대로 –

모바일 뷰 컨테이너 클래스 나누기를 설명 할 수있는, 정확한 문제를 이해하지 못했다 (그들이 가서 조금 더 오른쪽으로) 그리고 전체 레이아웃이 중단됩니다. 실제 예제의 크기를 조정하면 오른쪽에있는 두 개의 열이 나머지 것보다 약간 씩 떨어져 있음을 알 수 있습니다. – Bogdan

질문에 대한 답변이 아니지만 Susy (http://susy.oddbird.net/)와 같은 비 클래스 속성 기반 프레임 워크가 도움이 될 수 있습니다. – stephenhay

나는이 클래스와 함께 문제라고 생각합니다 :

,451,515,

.testgrid p { 
background: #5d68c2; 
margin-bottom: 2em; 
font-size: 0.75em; 
line-height: 1em; 
padding: 1em; /* <--- this is the problem */ 
color: #ffffff; 
text-transform: uppercase; 
font-weight: 800; 
font-family: "Open Sans", Helvetica, Arial, Sans-serif 
}

당신은 왼쪽과 padding 바로 제거해야합니다

.testgrid p { 
    background: #5d68c2; 
    margin-bottom: 2em; 
    font-size: 0.75em; 
    line-height: 1em; 
    padding: 1em 0px; /* updated */ 
    color: #ffffff; 
    text-transform: uppercase; 
    font-weight: 800; 
    font-family: "Open Sans", Helvetica, Arial, Sans-serif; 
}

나는 box-sizing을 시도하지만했다.

보기이 : DEMO

출처

2013-10-12 08:29:35

그래서 당신이

@media (max-width:312px) { 

.col-dt-5, .col-dt-8{padding:0px 2px !important} 


}

이 이

가 (최대-폭 : 312px) 미디어 쿼리 작성해야 문제의 부분을 볼 수있는 사진의 의미를 화면의 너비는 312px 또는 이하입니다

출처

2013-10-12 08:29:18

CSS Grid 2 열이 올바른 위치에 없습니다.

답변

관련 문제