누군가이 사건을 설명해 줄 수 있습니까? 다음은 jsfiddle의 코드입니다. 부트 스트랩 4를 사용합니다. 이미지 위에 텍스트를 추가하고 부모 div position:relative와 왼쪽 div에 추가 position:absolute하고 left:2%오른쪽 div position:absolute및 right:2%. 그리고 이것은 큰 화면에서 작동하지만 더 작은 화면이나 모바일 화면에서는 작동하지 않습니다. 새 열로 이동하고 싶습니다. jsfiddle에서 이것을 확인할 수 있습니다. 이렇게 부트 스트랩으로 시도하는 화면 크기를 조정 <div class="col-lg-6 col-md-6 col-sm-12">하십시오.
<div class="col-md-12 col-sm-12 col-xs-12 nopadding" style="margin-bottom: 15px; position: relative;">
<img src="assets/img/klupa_fontana.jpg" class="img-fluid">
<div style="position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%);">
<span style="color: #fff; font-size: 60px; line-height: 1.07143; font-weight:400;"> Lorem ipsum dolor</span><br><br>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="position: absolute; top: 15%; left: 2%;">
<span style="color: #fff; font-size: 50px; line-height: 1.07143; font-weight: 300;"> Lorem ipsum dolor.</span><br><br>
<span style="color: #fff; font-size: 40px; line-height: 1.07143; font-weight: 300;"> Lorem ipsum dolor Lorem ipsum dolor<br> Lorem ipsum dolor Lorem ipsum dolor.</span>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="position: absolute; top: 15%; right: 2%; text-align: right">
<span style="color: #fff; font-size: 50px; line-height: 1.07143; font-weight: 300;"> Lorem ipsum dolor Lorem ipsum dolor <br> fast and safe.</span><br><br>
<span style="color: #fff; font-size: 40px; line-height: 1.07143; font-weight: 300;"> Lorem ipsum dolor Lorem ipsum dolor<br> Lorem ipsum dolor Lorem ipsum dolor<br> Lorem ipsum dolor Lorem ipsum dolor</span>
</div>
</div>
</div>
감사합니다
div에서 이미지를 배경 이미지로 설정 한 다음 두 텍스트 그룹에 대해 데스크톱에서는 col-6을, 모바일에서는 col-12를 사용하는 것이 어떻습니까?
<div style="background-image: img" class="col-12">
<p class="col-6-lg col-12-xs">Left text</p>
<p class="col-6-lg col-12-xs">Right text</p>
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다