부트 스트랩 4 - 창 크기를 조정하면 열에서 이미지가 넘칩니다.

Question

부트 스트랩 새내기는 여기에 있습니다.

이전 페이지를 부트 스트랩하려고하는데 이미지가 다음 열로 넘치지 않게하는 방법을 알아낼 수 없습니다. 왼쪽 열에 그림이있는 두 개의 열이있는 행이 있습니다. 창 너비를 줄이면 이미지가 오른쪽 열로 넘치기 시작하고 결국 오른쪽 열의 맨 위에서 접 힙니다. 이미지가 왼쪽 열에 더 이상 들어갈 수 없을 때까지 왼쪽 열 너비가 고정되어 있거나 오른쪽 열의 맨 윗줄이 접히지 않도록하고 싶습니다.

이미지에 이미지 응답 클래스를 추가하려고했지만 내 이미지 크기 만 변경되며 이미지의 크기를 유지하는 것이 좋습니다. 어떤 도움이라도 대단히 감사하겠습니다! 당신이 찾고있는 아래와 같은 https://www.codeply.com/go/fb14u8fsSc

Answer 1

가 : 여기

내 코드?

하지만 노트의 몇 :

• 그것 때문에 당신의 단순화 codeply 예를들 수 있습니다,하지만 당신은 …X…에 해당되는, <div class="row"><div class="col-md-12">…X…</div></div>를 사용합니다. 그건 단순 해. 우리는 여기 부트 스트랩 4에 대해 얘기
• 는하지만, .img-responsive 클래스 class가 인라인 스타일 마진에 대해서는 부트 스트랩 4.
• 에 .img-fluid라는 것을 부트 스트랩 3에서이다 (당신은 또한 당신의 codeply에서이 것을 사용), 내가 제안 대신 spacing utility classes을 사용하십시오.

<div class="container-fluid" style="position: fixed"> 
 
    <div class="row"> 
 
     <div class="col"> 
 
      <div class="card my-3"> 
 
       <div class="card-header"></div> 
 
       
 
       <div class="card-body"> 
 
        Insert name here<br/> 
 
        <img src="https://dummyimage.com/188x225/000/fff" class="XXXimg-fluid" alt=""/> 
 
       </div> 
 

 
       <div class="card-footer"></div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-9"> 
 
      <div class="card text-xs-center mt-3"> 
 
       <div class="card-header"></div> 
 
       <div class="card-body"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>