부트 스트랩 컨테이너/열/행이 맞지 않습니다.

Question

부트 스트랩을 사용하여 행 및 열 정렬에 약간 문제가 있습니다. 여기

<div class="container"> 
    <div class="col-md-3"> 
     <img src="/assets/images/home/youth.jpg">" alt="...." class="img-responsive"></img> 
    </div> 
    <div class="row"> 
     <div class="col-md-2 col-sm-2 front-col"> 
      col-md-2 
     </div> 
     <div class="col-md-2 col-sm-2 front-col"> 
      col-md-2 
     </div> 
     <div class="col-md-2 col-sm-2 front-col"> 
      col-md-2 
     </div> 
    </div> <!-- ./row --> 

    <div class="row"><!-- Row 2 --> 
     <div class="col-md-2 col-sm-2 front-col"> 
      col-md-2 
     </div> 
    </div> 

내 문제는 (코드의 아래쪽) 두 번째 행의 열, 그것은 이미지 아래에 나타나는의 내 첫 번째 행 아래에 표시되지 않는 것입니다. 나는. 왼쪽에있는 열에 이미지가 있고이 오른쪽에 3 개의 행이있는 행이 있습니다. 이 행을 닫은 후에는 바로 아래에 다른 행이 필요하지만 행이 이미지 아래에 나타납니다.

합니다 ('전면 COL'선택은 [내가 믿는] 관련이 없습니다 - 그것은 패딩 왼쪽 5px하기 위해 3 열에서 설정) 사전에 어떤 도움

감사합니다.

스미스

Answer 1

당신은 .row 내부의 첫번째 .col-md-3 포장하지 않았습니다. 그렇게하면 두 번째 행이 그 옆에 나타나지 않고 그 아래에 나타납니다. 보조 노트로

<div class="row"> 
    <div class="col-md-3"> 
    <img src="http://placehold.it/100x100" alt="...." class="img-responsive"> 
    </div> 
</div> 

:

• 이미지 태그 </img> 같은 태그를 닫을 필요가 없습니다. 위의 수정을 참조하십시오.
• 닫는 컨테이너 div 태그 </div>을 놓쳤습니다.
• class="col-sm-2을 사용하는 경우 col-md-2이 필요하지 않습니다. 큰 화면의 열 개수가 다른 경우에만 추가하십시오.
• 격자 구조 div의 여백 또는 여백을 사용해서는 안됩니다. .front-col이 패딩을 변경했지만 그리드가 손상 될 가능성이 있다고 언급했습니다.

Here's a demo.