부트 스트랩 두 열 레이아웃 잘못 맞춤

Question

하나의 큰 이미지와 두 개의 열이있는 간단한 두 열 레이아웃을 만들려고합니다. 하나는 이미지 용이고 다른 하나는 텍스트 용입니다.

Misalignment http://i62.tinypic.com/1o57dl.png

는하지만 상단 큰 이미지로 이미지 열을 정렬 할 수 아니에요.-15px 여백을 가진 클래스를 추가 할 수는 있지만 XS 화면 크기에 어긋남이 있습니다.

with -15px margin http://i57.tinypic.com/2r5x7iq.png

는 또한 나는 다른 무언가를 수정해야 할 수도 있습니다 XS 화면에 대한 또 다른 -15px 여백을 추가 할 수 있습니다. 이것은 기본적인 레이아웃 문제입니다. 나는 뭔가 잘못하고 있다고 느낍니다.

내가 뭘 잘못하고 있고 어떻게 부트 스트랩 3에서 두 개의 열 레이아웃에 접근해야합니까? 여기

당신은 추가해야 Bootply Link

Answer 1

<div class="col-sm-12">이 문제가 발생합니다.

1. 그냥
2. 가 <div class="col-sm-12">

당신은 본질적으로 중첩 격자를 생성하고 부트 스트랩과 함께 모든 새로운 중첩 레벨을 시작하도록 요구 한 후 추가 <div class="row"> 추가 사업부를 삭제 : 현재 두 가지 옵션이 있습니다 새로운 <div class="row">

참조 : http://www.bootply.com/sh13QtYpFP

Answer 2

입니다 :

당신의 .custom 왼쪽 클래스에

.custom-left {  
    padding: 0; 
} 

. 이 div를 상단 이미지와 정렬하려면 .custom-right 클래스에 같은 것을 추가하십시오.

업데이트 Bootply : 아래 상자에 http://www.bootply.com/iQYEpYqXJZ

Answer 3

@bspel 감독님이 맞습니다. 부트 스트랩에서 열을 중첩 할 때 row을 추가 한 다음 중첩 된 열을 추가해야합니다. 용기, 로우 및 컬럼 (들) ...

컨테이너는 15 픽셀 패딩 가지고

그리드 3 부와 함께 작동 이유는 다음

이다. 행은 -15 픽셀의 여백으로 컨테이너 패딩을 무효화합니다. 열에는 15px의 패딩이 있습니다.이 패딩은 컨테이너 가장자리에서 내용을 빼내고 일관된 30px 거터를 만듭니다.

음수 행 여백에 의해서만 무효화되는 15px 패딩을 추가하는 목적은 어리석은 것처럼 보이지만 다른 열의 내부에 중첩 열을 허용하는 것이 필수적입니다! 아래 다이어그램에서 빨간색 테두리로 표시된 중첩 된 열이 추가 패딩을 적용하지 않고 어떻게 둘러싸인 열에 잘 맞는지 확인하십시오.

나는이 만드는에서 싱크 일단 당신이 모든 시간이 바람이 될 것입니다 방법을 그리드 정확하게 행동 것을 약속드립니다.