11/14 42-1 [BS] GridSystem_2

GridSystem 나머지 정리

 

 

1. Equal Height

   : If one of the column is taller than the other (due to text or CSS height), the rest will follow

okokok

  <h2>Equal Height </h2>
        <div class="row" >
            <div class="col bg-success">Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.</div>
            <div class="col  bg-danger">col</div>
            <div class="col bg-warning">col</div>
        </div>

하나의 div에만 height 크기를 적용에도 나머지 div에도 같은 높이가 적용되는건 같음 !

 

2. Nested Columns

column안의 column !!

코드 잘 봐야함 !! column 안에다가 <div class = "row"> 해서 또 column을 넣은거임 !!

 <h2>Nested Columns</h2>
        <div class="row">
            <div class="col-8 bg-warning p-4" > .col-8  <!--패딩줘서 가운데 아이들 안으로 쏙 넣는 효과-->          
                <div class="row">
               		<div class="col-6 bg-dark p-3">.col-6</div>
                	<div class="col-6 bg-success p-3">.col-6</div>
                </div>
            </div>
                     <!---display:flex;align-items:center; justify-content:center  : 글자 가운데 정렬-->
            <div class="col-4 bg-primary d-flex align-items-center justify-content-center">.col-4</div> 
       </div>

 

 

3.No Gutters

 : 좌우 15px씩(총 30px) 여백을 없애버리기, 이건 row에 주기!

 <h2>No Gutters</h2>  <!---좌우 15px씩(총 30px) 여백을 없애버리기, 이건 row에 주기!-->
   <div class="row no-gutters mb-4">
       <div class="col-sm "><img class="w-100"  src="images/images.jpg " alt="no-gutters"></div>
       <div class="col-sm "><img class="w-100" src="images/images.jpg " alt="no-gutters"></div>
       <div class="col-sm "><img class="w-100" src="images/images.jpg " alt="no-gutters"></div>
   </div>