자꾸 입문 - 3

열의 자동 레이아웃

등폭 컬럼

행의 열을 등폭으로 만들려면 col 클래스를 사용하는 것이 가장 쉽습니다.
1행을 2열로 하고 싶은 경우는, col 클래스를 지정한 요소를 2개, 3열로 하고 싶은 경우는 3개 배치합니다.
col 클래스를 사용하면 한 행에 들어가는 각 열이 자동으로 등폭으로 배치됩니다.

<div class="container">
    <div class="row"><!-- row : 1行目 -->
        <div class="col">1列目</div><!-- col : 等幅カラム -->
        <div class="col">2列目</div><!-- col : 等幅カラム -->
    </div>
    <div class="row"><!-- row : 2行目 -->
        <div class="col">1列目</div><!-- col : 等幅カラム -->
        <div class="col">2列目</div><!-- col : 等幅カラム -->
        <div class="col">3列目</div><!-- col : 等幅カラム -->
    </div>
</div>

지정 폭 컬럼

열의 너비를 지정하려면 col-* 클래스("*"에는 1에서 12까지의 숫자가 포함됨)를 사용합니다.
*에 들어가는 숫자는 합계 12(그리드 12열분의 열)가 되도록 사용하고 싶은 열분의 수를 지정합니다.
등폭 컬럼으로 하고 싶은 경우는, col 클래스를 지정한 요소를 3개 배치하는 대신 col-4 클래스를 지정한 요소를 3개 배치해도, 4열 컬럼×3=12 컬럼 열분이 되어, 3 두 개의 등폭 열이됩니다.

<!-- 1列カラム × 12 = 12列分 -->
<div class="container"><!-- container : 箱 -->
    <div class="row"><!-- row : 行 -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
    </div>
</div>

<!-- 2列カラム + 4列カラム + 6列カラム = 12列分 -->
<div class="container"><!-- container : 箱 -->
    <div class="row"><!-- row : 行 -->
        <div class="col-2">co-2</div><!-- col-2 : 2列分のカラム -->
        <div class="col-4">co-4</div><!-- col-4 : 4列分のカラム -->
        <div class="col-6">co-6</div><!-- col-6 : 6列分のカラム -->
    </div>
</div>

<!-- 5列カラム + 7列カラム = 12列分 -->
<div class="container"><!-- container : 箱 -->
    <div class="row"><!-- row : 行 -->
        <div class="col-5">co-5</div><!-- col-2 : 5列分のカラム -->
        <div class="col-7">co-7</div><!-- col-4 : 7列分のカラム -->
    </div>
</div>

색인

부트스트랩 자꾸 입문
부트스트랩 자꾸 입문 - 2

후기

끝까지 고마워 주셔서 감사합니다. (＾인＾) 감사