如何在Bootstrap 5.3中将页眉置于顶部、页脚置于底部，主内容位于它们之间？

huangapple
go评论120阅读模式
英文:

How align header in top, footer in bottom of the page and main between them in bootstrap 5.3

问题

Iam新手使用Bootstrap。我在这个HTML页面中使用了Bootstrap 5.3。现在我想将页眉对齐到顶部，页脚对齐到底部，并调整它们之间的主要内容的大小。我尝试了以下HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Test Webpage</title>
  8.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  9.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  10.     <style>
  11.     </style>
  12.     <body style="min-height: 100vh; background-color: rgb(100,100,100);">
  13.         <header style="background-color: rgb(210, 210, 241);">
  14.             Header
  15.         </header>
  16.         <main  style="background-color: rgb(185, 185, 215);">
  17.             Main content
  18.         </main>
  19.         <footer style="background-color: rgb(235, 235, 255);">
  20.             Footer
  21.         </footer>
  22.     </body>
  23. </head>

从上面的代码生成以下输出：

如何在Bootstrap 5.3中将页眉置于顶部、页脚置于底部，主内容位于它们之间？

我想要以下输出：

如何在Bootstrap 5.3中将页眉置于顶部、页脚置于底部，主内容位于它们之间？

英文:

Iam new to bootstrap. I used bootstrap 5.3 in this html page. Now i want to align header in the top, footer in the bottom and size of the main between them. I tried the following html

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. 	&lt;meta charset=&quot;utf-8&quot;&gt;
  5. 	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  7. 	&lt;title&gt;Test Webpage&lt;/title&gt;
  8. 	&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  9. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js&quot;&quot;&gt;&lt;/script&gt;
  10. 	&lt;style&gt;
  11. 	&lt;/style&gt;
  12. 	&lt;body style=&quot;min-height: 100vh; background-color: rgb(100,100,100);&quot;&gt;
  13. 	&lt;header style=&quot;background-color: rgb(210, 210, 241);&quot;&gt;
  14. 	Header
  15. 	&lt;/header&gt;
  16. 	&lt;main  style=&quot;background-color: rgb(185, 185, 215);&quot;&gt;
  17. 	Main content
  18. 	&lt;/main&gt;
  19. 	&lt;footer style=&quot;background-color: rgb(235, 235, 255);&quot;&gt;
  20. 	Footer
  21. 	&lt;/footer&gt;
  22. 	&lt;/body&gt;
  23. &lt;/head&gt;

The following out is generated from above code

如何在Bootstrap 5.3中将页眉置于顶部、页脚置于底部，主内容位于它们之间？

I want output like below

如何在Bootstrap 5.3中将页眉置于顶部、页脚置于底部，主内容位于它们之间？

答案1

得分: 1

您的HTML由3个部分组成：

关键在于在内容上使用Bootstrap的flex-grow-1类，并在底部上使用flex-shrink-0类，将底部推至页面底部。另外，将Bootstrap的类d-flex和flex-column添加到<body>中。

请参阅下面的代码片段。

  1. <!doctype html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>Bootstrap demo</title>
  8.   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  9. </head>
  11. <body class="d-flex flex-column">
  12.   <!-- Header -->
  13.   <nav class="navbar navbar-expand-lg bg-light">
  14.     <div class="container-fluid">
  15.       <a class="navbar-brand" href="#">Navbar</a>
  16.       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  17.         <span class="navbar-toggler-icon"></span>
  18.       </button>
  19.       <div class="collapse navbar-collapse" id="navbarSupportedContent">
  20.         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  21.           <!-- Navigation items -->
  22.         </ul>
  23.         <form class="d-flex" role="search">
  24.           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  25.           <button class="btn btn-outline-success" type="submit">Search</button>
  26.         </form>
  27.       </div>
  28.     </div>
  29.   </nav>
  31.   <!-- Page content -->
  32.   <div id="page-content" class="flex-grow-1">
  33.     <div class="container text-center">
  34.       <div class="row justify-content-center">
  35.         <!-- Content -->
  36.       </div>
  37.     </div>
  38.   </div>
  40.   <!-- Footer -->
  41.   <footer id="sticky-footer" class="flex-shrink-0 py-4 bg-dark text-white-50">
  42.     <div class="container text-center">
  43.       <small>Copyright &copy; Your Website</small>
  44.     </div>
  45.   </footer>
  47.   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
  48. </body>
  50. </html>
英文:

Your HTML consists of 3 parts:

The key is to use Bootstrap's flex-grow-1 class on the content and flex-shrink-0 on the footer to push the footer all the way down to the bottom of the page. Also, add Bootstrap's classes d-flex and flex-column to the &lt;body&gt;.

See the snippet below.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. html,
  2. body {
  3. height: 100%;
  4. }

<!-- language: lang-html -->

  1. &lt;!doctype html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;utf-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  6. &lt;title&gt;Bootstrap demo&lt;/title&gt;
  7. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ&quot; crossorigin=&quot;anonymous&quot;&gt;
  8. &lt;/head&gt;
  9. &lt;body class=&quot;d-flex flex-column&quot;&gt;
  10. &lt;!-- Header --&gt;
  11. &lt;nav class=&quot;navbar navbar-expand-lg bg-light&quot;&gt;
  12. &lt;div class=&quot;container-fluid&quot;&gt;
  13. &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
  14. &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
  15. &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  16. &lt;/button&gt;
  17. &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
  18. &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
  19. &lt;li class=&quot;nav-item&quot;&gt;
  20. &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
  21. &lt;/li&gt;
  22. &lt;li class=&quot;nav-item&quot;&gt;
  23. &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
  24. &lt;/li&gt;
  25. &lt;li class=&quot;nav-item dropdown&quot;&gt;
  26. &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
  27. Dropdown
  28. &lt;/a&gt;
  29. &lt;ul class=&quot;dropdown-menu&quot;&gt;
  30. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
  31. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
  32. &lt;li&gt;
  33. &lt;hr class=&quot;dropdown-divider&quot;&gt;
  34. &lt;/li&gt;
  35. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
  36. &lt;/ul&gt;
  37. &lt;/li&gt;
  38. &lt;li class=&quot;nav-item&quot;&gt;
  39. &lt;a class=&quot;nav-link disabled&quot;&gt;Disabled&lt;/a&gt;
  40. &lt;/li&gt;
  41. &lt;/ul&gt;
  42. &lt;form class=&quot;d-flex&quot; role=&quot;search&quot;&gt;
  43. &lt;input class=&quot;form-control me-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
  44. &lt;button class=&quot;btn btn-outline-success&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
  45. &lt;/form&gt;
  46. &lt;/div&gt;
  47. &lt;/div&gt;
  48. &lt;/nav&gt;
  49. &lt;!-- Page content --&gt;
  50. &lt;div id=&quot;page-content&quot; class=&quot;flex-grow-1&quot;&gt;
  51. &lt;div class=&quot;container text-center&quot;&gt;
  52. &lt;div class=&quot;row justify-content-center&quot;&gt;
  53. &lt;div class=&quot;col-md-7&quot;&gt;
  54. &lt;h1 class=&quot;fw-light mt-4 text-white&quot;&gt;Sticky Footer using Flexbox&lt;/h1&gt;
  55. &lt;p class=&quot;lead text-white-50&quot;&gt;Use just two Bootstrap utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!&lt;/p&gt;
  56. &lt;/div&gt;
  57. &lt;/div&gt;
  58. &lt;/div&gt;
  59. &lt;/div&gt;
  60. &lt;!-- Footer --&gt;
  61. &lt;footer id=&quot;sticky-footer&quot; class=&quot;flex-shrink-0 py-4 bg-dark text-white-50&quot;&gt;
  62. &lt;div class=&quot;container text-center&quot;&gt;
  63. &lt;small&gt;Copyright &amp;copy; Your Website&lt;/small&gt;
  64. &lt;/div&gt;
  65. &lt;/footer&gt;
  66. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  67. &lt;/body&gt;
  68. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月19日 18:08:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/76053250.html
  • bootstrap-5
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定