>source

부트 스트랩 4를 사용하고 다음과 같은 jumbotron 클래스가 있습니다.

.rounded-circle{
    vertical-align: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    left: -150px;
    top: -50px;
  }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="jumbotron rounded-0">
  <div class="container">
   <div class="row">
    <div class="col-md-4">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="..." class="rounded-circle">
    </div>
    <div class="col-md-8">
    this is mobile way of the container and other line
    </div>
  </div>
 </div>
</div>

이 구문을 사용하면 바탕 화면보기도 다음과 같이 표시됩니다. https://i.stack.imgur.com/mUrAe.png

하지만 내 모바일보기에서는 다음과 같이 올바른 위치에 표시되지 않습니다.https://i.stack.imgur.com/SaRuW.png

그런 다음 모든 장치 (데스크톱, 탭 및 휴대폰)에서 내 이미지와 설명을 어떻게 볼 수 있습니까? 작은 장치 상단 이미지와 이미지 아래 설명이 필요합니다.

편집 된 이미지


  • 답변 # 1

    여기에서 사용하는 것은 잘못되었습니다. position: absolutecol , flex-box는 당신이 도달하려는 행동을 만들 수있는 유틸리티를 제공합니다. position: absolute ,

    먼저수업 추가 align-items-center 수업 옆에 row (이렇게하면 중앙이 수직으로 정렬됩니다)

    둘째수업 추가 col-12 열에 (더 작은 크기를 위해 이미지 아래에 설명을 만드십시오)

    그때선택적으로 클래스를 추가 할 수 있습니다. text-centertext-md-left (크기가 클수록 왼쪽으로 정렬되고 작을수록 중앙이됩니다)

    .rounded-circle{
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <div class="jumbotron rounded-0">
      <div class="container">
       <div class="row align-items-center text-center text-md-left">
        <div class="col-12 col-md-4">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="..." class="rounded-circle">
        </div>
        <div class="col-12 col-md-8">
        this is mobile way of the container and other line
        </div>
      </div>
     </div>
    </div>
    
    

  • 이전 python - Heroku에 업로드 된 CSV 및 CSV가있는 Flask 앱의 KeyError
  • 다음 pandas - matplot 및 python을 사용하여 데이터베이스에서 히스토그램 플로팅