부트스트랩 정렬문의드립니다...
본문
웹진형태의 게시판인데요 아래처럼되어있습니다.
이미지가 왼쪽에 있고 오른쪽에 글이 있고요
이걸 최소사이즈로 줄이면 이미지가 100프로가되고 글씨들이 이미지밑으로 가버립니다..
최소사이즈가되더라도 왼쪽 이미지 오른쪽 글씨를 유지하려면 어떻게 해야하죠?
class="row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2
답변 2
음.... 만약에 한줄씩 나오는 부모 태그가 있다고 가정을 한다면
예를 들어서요.
HTML
<div class="container">
<img src="image.jpg" alt="Your Image">
<div class="text">
<p>Your text here</p>
</div>
</div>
//---
CSS
.container {
display: flex;
align-items: center;
}
img {
flex-shrink: 0;
width: 50%;
max-width: 200px; /* 혹은 또 다른 원하는 임의값으로*/
margin-right: 1rem;
}
.text {
flex-grow: 1;
}
img 요소의 flex-shrink: 0 속성은 이미지가 지정된 너비 아래로 축소되는 것을 방지.
width: 50% 및 max-width: 200px 속성은 각각 이미지의 초기 너비와 최대 너비를 지정. 필요에 맞게 이 값을 조정.
.text 요소의 flex-grow: 1 속성을 사용하면 텍스트가 컨테이너의 나머지 공간을 채울 수 있습니다. 이렇게 하면 컨테이너 크기가 조정되더라도 텍스트가 이미지 오른쪽에 유지됩니다.
이미지의 정렬이 부트스트랩 그리드로 되어있는데..
이방식으로 처리할수는 없는건가요??
class="row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2
상관없습니다.
그럼 이렇게 수정해 보세요.
<div class="container">
<div class="row row-cols-1 row-cols-md-2">
<div class="col-md-6">
<img src="image.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-6">
<p>원하시는 택스트</p>
</div>
</div>
</div>
스킨 얻어쓰는 신세라서 보내주신걸 적용을 못하고 있습니다..ㅜㅜㅜ
제가 다운받은스킨이 https://sir.kr/g5_skin/54431 인데요...
스킨한번 보시고 도움좀 부탁드려도 될까요;;;
나리야 부분은 함수로 되어있는 듯 하네요. 링크 주신 부분에도 질문을 하셨는데
아직 답변이 없어서 그러셨군요.
넹;;ㅜㅜ 몇시간째 이것만 계쏙보고 있습니다..ㅜㅜ
나리야는 저 기억으로 함수부분을 수정을 하셔야 하고
질문에 브라우즈 창을 최소 모바일 사이즈까지 줄인다고
가정을 하면 미디어쿼리 부분을 수정해서 해야 정상적을 겁니다.
크롬으로 개발자 도구 F12로 여시고 줄이는 부분을 찍어 보시는 것도 방법인데요.
