Bootstrap 레이아웃(2)

[Bootstrap 계속]

• Bootstrap에서는 모바일(다음에 태블릿, pc 순서로) 버전 먼저 짜는게 더 쉽다
• Bootstrap에서 text-end : 우측정렬

Q. PC에서 4열, 태블릿 2열, 모바일 1열 코드 어떻게?

1. 모바일 먼저 짜기

<div class="row">
      <div class="">안녕</div>
      <div class="">안녕</div>
      <div class="">안녕</div>
      <div class="">안녕</div>

1. 태블릿 버전 짜기

<div class="row">
      <div class="col-6">안녕</div>
      <div class="col-6">안녕</div>
      <div class="col-6">안녕</div>
      <div class="col-6">안녕</div>

--> 이렇게 되면 모든 사이즈에서 6사이즈를 차지 하므로 조건부를 줘야함
--> 태블릿사이즈 이상에서만 col-6 되도록 아래와 같이 수정

<div class="row">
      <div class="col-md-6">안녕</div>

1. PC 버전 짜기

<div class="row">
     <div class="col-md-6 col-lg-3">

--> 조건부 연달아서 입력 가능함.