Grid로 2번 연속 나누기

Grid system은 웹페이지를 12개의 열로 나누어서 활용하게 만든다.

<div class="row">
  <div class="col-sm-6 col-sm-offset-3">
    <div class="row">
      {% for partner in partner_list %}
      <div class="col-sm-4">
        <h4>{{ partner.name }}</h4>
        <div>{{ partner.address }}</div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<div class="col-sm-6 col-sm-offset-3">에서

col-sm-offset-3은 3개 열을 상쇄시켜서 가운데 정렬을 할 수 있도록 한다.

양옆 3칸을 비워두고 가운데 6칸에서 데이터를 매핑하게 된다.

<div class="col-sm-4">는

총 12개 칸 중에 4칸을 사용해서 이름과 주소를 매핑하는데,

for문을 통해 순차적으로 다른 데이터도 매핑되므로 4칸씩 자리를 차지하게 된다.

3번 연속으로 4칸을 차지하면 12칸이 되므로 그 다음 데이터는 아랫줄로 이어서 출력하게 된다.