container-fluid 속 container

kimshineui·2023년 7월 25일

상단 메뉴바속에 container메뉴가 있다 스크롤을 내렸을때
sticky-top(부트스트렙의 상단고정) 을 하면은 양옆으로 전체를 차지하는 fluid가 아니라 딱 container만큼만 내려간다. 여기서 내렸을때는 배경색이 전체 white로 하고 싶으면 container-fluid 안에 container을 넣게 되면 내렸을때 부자연스럽지 않다.

<div class="container-fluid sticky-top" style="background-color: white;">
    <div class="container">
        <div class="row">
            <!-- your content here -->
        </div>
    </div>
</div>

스크롤을 내렸을 때 'sticky-top'이 동작하면서 메뉴의 배경 색이 전체 폭으로 확장되길 원하시는 것 같습니다. 이 경우, 메뉴의 배경 색을 담당하는 별도의 'div' 요소를 만들고, 그 안에 현재의 'container' 클래스를 가진 'div'를 넣는 방법을 사용할 수 있습니다.

여기서 중요한 것은, 새로 만든 'div'에 'sticky-top' 클래스를 적용하고, 전체 폭을 가지도록 'container-fluid' 클래스를 추가하는 것입니다.

0개의 댓글