Bootstrap에서 5열 레이아웃을 어떻게 만들 수 있나요?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-10-27 10:05:31

원래의

377명이 탐색했습니다.

How can I create a 5-column layout in Bootstrap?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!