부트 스트랩 오버플로가 제대로 정렬되지 않음

Question

작은 화면 (예 : 휴대 전화)에서 텍스트 위의 이미지를 원하는 위치에 큰 화면에서 텍스트 오른쪽에 이미지를 표시하는 페이지가 있습니다.

큰 화면에서 이미지를 오른쪽으로 가져 오려면 오프셋을 사용하고 있습니다. 그러나, 그것은 큰 스크린에 적절히 정렬되지 않습니다 (작은 스크린은 예상했던대로입니다). 왼쪽 텍스트는 오른쪽 이미지가 끝날 때까지 시작되지 않습니다. ...

Here is a screenshot (원하지 않는 간격이 노란색으로 표시)

그리고 코드 ... 나는 전에 부트 스트랩의 오프셋 기능을 사용하지 않은 나는 내가 잘못 무엇을 아주 확실하지 않다

<div class="row"> 

    <div class="col-md-4 col-xs-12 col-md-offset-8"> 
     <img src="<?php echo $p['main_img_landing']; ?> " class="img-responsive" alt=""> 
    </div> 

    <div class="col-md-8 col-xs-12"> 
     <?php echo nl2br($p['desc_landing']); ?>  
    </div> 

</div> 

도움을 주시면 감사하겠습니다.

Answer 1

Heyho,

당신은 COL-MD-오프셋 (8) 따라서이 열이 전체 라인을 작성, 여백과 오른쪽 이미지를 추진하고와 함께 무엇을하고 있는지.

수학 : 4 + 8 = 12

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-sm-4 col-xs-12 col-sm-push-8"> 
 
    Your Picture 
 
</div> 
 
<div class="col-sm-8 col-xs-12 col-sm-pull-4"> 
 
    Your text 
 
</div>

가 푸시를 통해이를 해결하고 당길 수있다. 따라서 중간 화면에서 텍스트는 왼쪽에 "첫 번째"로 비율 8/4로 표시됩니다. 그런 다음 작은 화면에서 사진이 상단과 텍스트 아래에있는 정상적인 순서로 이동합니다. 희망이 도움이 :)

아, 테스트 이유에 대한 내가 넣어 콜 - sm. 그렇지 않으면 미리보기에서 결과를 볼 수 없습니다.

인사말