부트 스트랩의 바닥 글 [중복]
Nov 24 2020
페이지 맨 아래에있는 부트 스트랩에서 웹 반응 형 유연한 바닥 글을 만들려고합니다 (콘텐츠가 페이지 맨 아래에 있고 콘텐츠가 증가하면 그에 따라 변경됨). 이것은 내가 사용하는 내 코드입니다. 내가 무엇을 놓치고 있거나 잘못하고 있습니까? 초보자부터 부트 스트랩까지 및 버전 4.5.0 사용. 미리 감사드립니다
<footer class="footer">
<div class="container-fluid">
<ul class="footertext">
<li class="list">
About Us
</li>
<li class="list">
Contact Us
</li>
</ul>
</div>
</footer>
이것은 내 CSS입니다
.footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: black;
}

내 바닥 글은 페이지를 검사 할 때 전체 화면 너비가없는이 div 안에 있습니다. 최소 너비를 100 % 및 100vh에 추가해 보았습니다.
.page-container {
position: relative;
min-height: 100vh;
/*min-width: 100%;*/
}
답변
1 SaiManoj Nov 24 2020 at 11:58
당신은 부트 스트랩 붙박이 클래스를 사용할 수 있습니다 d-flex flex-column min-vh-100
메인 컨테이너를위한 mt-auto
수단 margin-top auto
당신에게 footer
. 따라서 바닥 글은 항상 콘텐츠와 관련하여 페이지 하단에 있습니다. 아래는 동일한 스 니펫입니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid d-flex flex-column min-vh-100 text-center">
<section>
<h1>My content</h1>
</section>
<footer class="mt-auto text-light bg-dark pt-2 pb-2">footer</footer>
</div>