부트 스트랩의 바닥 글 [중복]

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;
    }

이것은 특정 크기로 보려고 할 때의 scrrenshot입니다. 포터가 화면에 맞을만큼 길지 않습니다. 하지만 다른 화면에서는 괜찮아요

내 바닥 글은 페이지를 검사 할 때 전체 화면 너비가없는이 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>