질문

부트스트랩 플렉스 박스 container가 있고 왼쪽의 이미지를 수평으로 유지하려고하지만 제목, 설명 및 섹션 별 전원이 모두 오른쪽에 수직으로 쌓입니다. 그러나 정렬을 변경하려고 할 때마다 찾을 수 있었던 유일한 옵션은 모든 콘텐츠 상자를 가로 또는 세로로 쌓는 것입니다. 부동을 피하고 싶지만 이미지를 가로로 정렬하고 세 개의 다른 텍스트 섹션을 세로로 정렬하는 방법은 무엇입니까?

    <div class="container">
        <div class="d-flex justify-content-end flex-row my-flex-container ">
            <div class="mr-auto p-2 my-flex-item"><img src="./images/webimage.png" alt="Mountain View"></div>                
            <div class="p-2 my-flex-item hello">Quoriron</div>
            <div class="p-2 my-flex-item hello">Quoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an APIQuoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an APIQuoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an API</div>            
            <div class="p-2 my-flex-item hello">Powered by: React, Rails</div>
        </div>
    </div>

답변1

열 방향으로도 여전히 텍스트에 또 다른 줄 바꿈이있을 수 있으므로 동적 응답 솔루션의 경우 추가 래퍼를 사용하는 것이 좋습니다.

참고, 그에 따라 부트스트랩 class를 조정해야합니다.

참고 2. 마크 업을 변경할 수없는 경우 float 가이 작업을 수행 할 수 있습니다.

스택 snippet

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

    <div class="container">
        <div class="d-flex justify-content-end flex-row my-flex-container ">
            <div class="mr-auto p-2 my-flex-item"><img src="./images/webimage.png" alt="Mountain View"></div>                
            <div class="p-2 my-flex-item hello">
              <div>Quoriron</div>
              <div>Quoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an APIQuoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an APIQuoriron is a Quora clone, made with React/Redux and using Ruby-on-Rails as an API</div>            
              <div>Powered by: React, Rails</div>
            </div>
        </div>
    </div>