Bootstrap 4에서 5열 레이아웃을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Bootstrap 4에서 5열 레이아웃을 만드는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-10-26 01:39:02

원래의

304명이 탐색했습니다.

How to create a 5-column layout in Bootstrap 4?

Bootstrap - 5열 레이아웃

Bootstrap을 사용하여 5열 전체 너비 레이아웃을 구현하고 싶지만 해결책을 찾지 못했습니다. 귀하의 필요에 맞는 것입니다.

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>

로그인 후 복사

Bootstrap 4가 Flexbox를 사용하기 때문에 이 솔루션이 작동합니다. 동일한 행 내에서 열을 래핑하려면

또는

5개 열마다.

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 4에서 5열 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!