Twitter Bootstrap에서 바닥글을 맨 아래로 플러시하는 방법은 무엇입니까?

Twitter Bootstrap의 바닥글 플러시

페이지 하단에 바닥글을 플러시하는 것은 웹 디자인에서 일반적인 작업입니다. 그러나 Twitter Bootstrap과 같은 반응형 프레임워크를 사용하면 이를 달성하는 것이 어려울 수 있습니다.

문제 이해

Bootstrap의 반응적 특성은 종종 의존하는 전통적인 바닥글 플러시 방법을 방해할 수 있습니다. 고정 높이 또는 아래쪽 여백에. 결과적으로 다양한 화면 크기에서는 바닥글이 항상 페이지 하단에 표시되지 않을 수 있습니다.

Bootstrap 2.2.1 이상에서 문제 해결

Bootstrap 이제 navbar 구성 요소라는 바닥글 플러시를 위한 내장 솔루션이 포함되어 있습니다. 이를 사용하려면 navbar에 ".navbar-fixed-bottom" 클래스를 추가하기만 하면 됩니다.

<div class="navbar navbar-fixed-bottom"></div>

Bootstrap 3.x 및 4.x

의 경우 Bootstrap 3.x 및 4.x에도 동일한 접근 방식이 적용됩니다. ".fixed-bottom" 클래스와 함께 navbar 구성 요소를 사용합니다.

<div class="navbar fixed-bottom"></div>

페이지 콘텐츠가 가려지지 않도록 하려면 다음 CSS 규칙을 추가해야 합니다.

body {
  padding-bottom: 70px;
}

결론

이러한 방법은 바닥글을 페이지 하단까지 플러시하는 효과적인 방법을 제공합니다. 부트스트랩. 내장된 탐색 모음 구성 요소를 활용하면 반응성이 뛰어나고 일관된 바닥글 레이아웃을 만들 수 있습니다.

위 내용은 Twitter Bootstrap에서 바닥글을 맨 아래로 플러시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!