Bootstrap 바닥글 mt-auto 설정

JSP를 개발하고 있지만 디자인에는 Bootstrap을 사용하고 있습니다.

이번에는 머리글과 바닥글을 붙이자! 라는 테마로 Bootstrap을 조사하고 있었습니다.

하고 싶은 이미지로
htps : // 게이 t보오 tst et al p. 코 m / 드 cs / 4.5 / 에 mp ぇ s / s 치 쿠 ーぉ 오테 r v vr /

이 머리글과 바닥 글을 배치하고 싶습니다.

하지만 이런가? 라고 생각해서 발췌해 여러가지 시험해 봐도 바닥글이 잘 화면 하단에 붙지 않습니다.

그래서 샘플 다운로드하고 불필요한 소소하고 바닥글의 위치만 유지할 수 있었던 것이 이쪽.

<!doctype html>
<html class="h-100">
  <head>
    <meta charset="utf-8">
    <title>Sticky Footer Navbar Template · Bootstrap</title>
    <!-- Bootstrap core CSS -->
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body class="d-flex h-100">
<!-- Begin page content -->
<footer class="footer mt-auto py-3">
  <div class="container">
    <span class="text-muted">Place sticky footer content here.</span>
  </div>
</footer>
</body>
</html>

HTML과 BODY에도 클래스를 설정하지 않으면 안 되고, 이것에 의해 「mt-auto」가 잘 움직이게 되어 있는 것 같습니다.

역시 이것일까? 라고 생각하면서 추기해 가는 것보다, 불필요한 것들을 지워 결과를 확인해 가는 것이 빨리 회답을 얻을 수 있네요.

Bootstrap 편리하지만, 여러가지 있어도 더 이상 Jquery를 사용하고 있는 기분이 되네요.

Reference

이 문제에 관하여(Bootstrap 바닥글 mt-auto 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ten_kun/items/8a0637562a622b22158a

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다