Bootstrap에서 5열 레이아웃을 어떻게 만들 수 있나요?

Bootstrap - 5열 레이아웃 만들기

Bootstrap에서는 다음 방법을 사용하여 5개의 전체 너비 열로 레이아웃을 만들 수 있습니다.

옵션 1: 자동 레이아웃 그리드(Bootstrap 4)

Bootstrap 4의 경우 자동 레이아웃 그리드를 활용하여 5개의 동일한 너비, 전체 너비 열을 생성합니다.

<code class="html"><div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div></code>

옵션 2: Clearfix Break(Bootstrap 4)

동일한 행 내에서 열을 래핑하려면 5개 열마다 Clearfix Break를 삽입하세요.

<code class="html"><div class="container">
    <div class="row">
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col-12"></div> <!-- Clearfix break -->
        <div class="col">X</div>
    </div>
</div></code>

옵션 3: row-cols-5 클래스(Bootstrap 4.4 )

Bootstrap 버전 4.4 이상의 경우 행 요소에 row-cols-5 클래스를 사용합니다.

<code class="html"><div class="container">
    <div class="row row-cols-5">
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
    </div>
</div></code>

위 내용은 Bootstrap에서 5열 레이아웃을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!