사과마켓 부트스트랩 그리드 css

6 글 보임 - 1 에서 6 까지 (총 6 중에서)

글쓴이

글
2022년 1월 24일 08:25 #25572

산딸기
참가자

부모 태그에 <div class="grid"> 했지만 foreach가 하나씩 나오는 구문이라 이번 케이스는 부트스트랩 그리드 정렬 구현하기 불가능인가요....? 부트스트랩 가면

<div class="grid">
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
</div>

라고 예시가 있는데 저 foreach 특성상 자료 3개씩 안나오니깐요. 부트스트랩 예시처럼 해보니깐 똑같은게 3번 반복 되더라고요... foreach라서 css 커스터 마이징도 안먹히고? 그렇습니다...

그리고 flex-grow-1 에서 옆으로 말고 세로로 늘어나는 키워드 없나요? 이미지 아래에 텍스트가 박히게 하고 싶은데 flex-grow -1 때문에 안되는지요..?

2022년 1월 24일 10:11 #25580

codingapple
키 마스터

bootstrap 문법이 이상할 뿐입니다 g-col-4 안에 또 g-col-2가 있는게 이상하군요

원래 html은 박스안에 내용이 많아지면 아래로 자동으로 밀려납니다

이미지 좀 키우고 밑에 div박스 하나 만들어놓으면 그 div는 알아서 밑으로 내려갑니다

2022년 1월 24일 12:29 #25597

산딸기
참가자

background-color로 박스 확인하며 이미지 박스 아래로 이동시키려고하는데 부트스트랩 때문인지 적용이 안됩니다. 선생님이 하신 이미지는 css적용이 되었는데 저는 안되네요....

<div class="card" style="width: 18rem;">
<img src="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

쌤이 하신 이미지 경로는 <div class="thumbnail" style="background-image: url('${doc.data().이미지}')"></div>디브 태그인데 저 위의 부트스트랩 카드 양식에 맞추려면 이미지 태그여야 합니다. 이럴떈 부트스트랩을 사용할 수 없는 건가요?

2022년 1월 24일 15:02 #25614

codingapple
키 마스터

<img> 에 display:block 주면 <div>랑 똑같습니다

<div>도상관없습니다

2022년 1월 24일 16:30 #25628

산딸기
참가자

그리드 정렬 css 로 display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-template-rows: 1fr 1fr 1fr;

있네요... forEach하고 아무 상관없나요? 안되는게 그것 때문인가 해서요.

우연히 display: inline-block;
text-align: left; 하니까 그리드 비슷하게 나오는데 인스타처럼 한 칸이 비워집니다.. 그리드와 유사한 좋은 조합없을까요..

2022년 1월 24일 18:24 #25647

codingapple
키 마스터

grid는 쓰기어려우니

<div class="row">

<div class="col-md-4"> 상품1 </div>

<div class="col-md-4"> 상품2 </div>

<div class="col-md-4"> 상품3 </div>

<div class="col-md-4"> 상품4 </div>

</div>

이렇게 레이아웃 구성하면 가로정렬 쉽습니다
글쓴이

글

6 글 보임 - 1 에서 6 까지 (총 6 중에서)

답변은 로그인 후 가능합니다.

로그인

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png