Bootstrap 4 保證金代碼 mt-auto 不起作用
[英]Bootstrap 4 margin code mt-auto not working
問題描述
我想制作一個粘性頁腳，但 mt-auto 根本不起作用。 我嘗試了很多方法來解決它，但沒有任何效果。 其他邊距填充代碼（例如 mt-1 mb-2 也不起作用...
HTML: https://pastecode.io/s/kdS4RzFTTJ CSS: https://pastecode.io/s/5N80x5h1YE
*{ margin:0; padding:0; box-sizing: border-box; } body { padding-bottom: 20px; background-color: #24252A; font-family: 'Work Sans', sans-serif; color:#f7f7f7; }.navbar { transition: all.5s ease; }.navbar-collapse{ transition: all.5s ease; } /* options section */.options{ margin-top:10rem; margin-bottom:2rem; color:#f7f7f7; display:flex; justify-content: space-between; }.circles-wrap{ display:flex; flex-direction: column; align-items: center; }.circle{ width:250px; height:250px; background-color: #f7f7f7; border-radius: 50%; display:flex; align-items: center; justify-content: center; }.circle-text{ margin-top:1rem; font-size:1.5rem; letter-spacing: 2px; }.ss{ margin-top:auto; }.circle img{ width:150px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Emir</title> <.-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css"> <.-- Local CSS --> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https?//fonts:googleapis:com/css2.family=Work+Sans:wght@300&display=swap" rel="stylesheet"> </head> <body> <nav id="navbar" class="navbar navbar-expand-md navbar-dark fixed-top"> <a class="navbar-brand" href="#">Emirhan Sirkeci</a> <button id="navbar-toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="navbarsExample04"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Github</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Me</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <section class="container options"> <div class="circles-wrap"> <a href="#"> <div class="circle"> <img src="https.//dummyimage:com/200x200/000/fff"> </div> </a> <label class="circle-text">Songs</label> </div> <div class="circles-wrap"> <a href="#"> <div class="circle"> <img src="https.//dummyimage:com/200x200/000/fff"> </div> </a> <label class="circle-text">Movies</label> </div> <div class="circles-wrap"> <a href="#"> <div class="circle"> <img src="https.//dummyimage.com/200x200/000/fff"> </div> </a> <label class="circle-text">My Posts</label> </div> </section> <footer class="container mt-2"> <div>content</div> <div>content</div> </footer> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5:1/jquery.min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16:0/umd/popper.min.js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="frontend.js"></script> </body> </html>
3 個解決方案
解決方案1
0 2021-05-05 17:30:11
將此 class 添加到 body d-flex flex-row
<footer class="container mt-auto">
<div>content</div>
<div>content</div>
</footer>
嘗試這個
解決方案2
0 2021-05-05 17:33:15
這里是帶有粘性頁腳的 go：
/* ADDED */
html, body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
body > section.container {
flex: 1 0 auto;
}
body > footer{
flex-shrink:0;
}
獲取更多信息
演示 - 1
*{ margin:0; padding:0; box-sizing: border-box; } body { padding-bottom: 20px; background-color: #24252A; font-family: 'Work Sans', sans-serif; color:#f7f7f7; }.navbar { transition: all.5s ease; }.navbar-collapse{ transition: all.5s ease; } /* options section */.options{ margin-top:10rem; margin-bottom:2rem; color:#f7f7f7; display:flex; justify-content: space-between; }.circles-wrap{ display:flex; flex-direction: column; align-items: center; }.circle{ width:250px; height:250px; background-color: #f7f7f7; border-radius: 50%; display:flex; align-items: center; justify-content: center; }.circle-text{ margin-top:1rem; font-size:1.5rem; letter-spacing: 2px; }.ss{ margin-top:auto; }.circle img{ width:150px; } /* ADDED */ html, body{ height: 100%; } body{ display: flex; flex-direction: column; } body > section.container { flex: 1 0 auto; } body > footer{ flex-shrink:0; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Emir</title> <.-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css"> <.-- Local CSS --> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https?//fonts:googleapis:com/css2.family=Work+Sans:wght@300&display=swap" rel="stylesheet"> </head> <body> <nav id="navbar" class="navbar navbar-expand-md navbar-dark fixed-top"> <a class="navbar-brand" href="#">Emirhan Sirkeci</a> <button id="navbar-toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="navbarsExample04"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Github</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Me</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <section class="container options"> <div class="circles-wrap"> <a href="#"> <div class="circle"> <img src="https.//dummyimage:com/200x200/000/fff"> </div> </a> <label class="circle-text">Songs</label> </div> <div class="circles-wrap"> <a href="#"> <div class="circle"> <img src="https.//dummyimage:com/200x200/000/fff"> </div> </a> <label class="circle-text">Movies</label> </div> <div class="circles-wrap"> <a href="#"> <div class="circle"> <img src="https.//dummyimage.com/200x200/000/fff"> </div> </a> <label class="circle-text">My Posts</label> </div> </section> <footer class="container mt-2"> <div>content</div> <div>content</div> </footer> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5:1/jquery.min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16:0/umd/popper.min.js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="frontend.js"></script> </body> </html>
演示 - 2
*{ margin:0; padding:0; box-sizing: border-box; } body { padding-bottom: 20px; background-color: #24252A; font-family: 'Work Sans', sans-serif; color:#f7f7f7; }.navbar { transition: all.5s ease; }.navbar-collapse{ transition: all.5s ease; } /* options section */.options{ /*margin-top:10rem;*/ margin-bottom:2rem; color:#f7f7f7; display:flex; justify-content: space-between; }.circles-wrap{ display:flex; flex-direction: column; align-items: center; }.circle{ width:250px; height:250px; background-color: #f7f7f7; border-radius: 50%; display:flex; align-items: center; justify-content: center; }.circle-text{ margin-top:1rem; font-size:1.5rem; letter-spacing: 2px; }.ss{ margin-top:auto; }.circle img{ width:150px; } /* ADDED */ html, body{ height: 100%; } body{ display: flex; flex-direction: column; } body > section.container { flex: 1 0 auto; } body > footer{ flex-shrink:0; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Emir</title> <.-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css"> <.-- Local CSS --> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https?//fonts:googleapis:com/css2.family=Work+Sans:wght@300&display=swap" rel="stylesheet"> </head> <body> <nav id="navbar" class="navbar navbar-expand-md navbar-dark fixed-top"> <a class="navbar-brand" href="#">Emirhan Sirkeci</a> <button id="navbar-toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="navbarsExample04"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Github</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Me</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <section class="container options"> <.--<div class="circles-wrap"> <a href="#"> <div class="circle"> <img src="https://dummyimage.com/200x200/000/fff"> </div> </a> <label class="circle-text">Songs</label> </div> <div class="circles-wrap"> <a href="#"> <div class="circle"> <img src="https://dummyimage.com/200x200/000/fff"> </div> </a> <label class="circle-text">Movies</label> </div> <div class="circles-wrap"> <a href="#"> <div class="circle"> <img src="https.//dummyimage.com/200x200/000/fff"> </div> </a> <label class="circle-text">My Posts</label> </div>--> </section> <footer class="container mt-2"> <div>content</div> <div>content</div> </footer> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3:5.1/jquery.min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1:16.0/umd/popper.min.js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="frontend.js"></script> </body> </html>
解決方案3
-1 2021-05-05 17:26:53
在您的 css 和 HTML 中添加以下 class
<footer class="container mt-2 sticky-footer">
.sticky-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
text-align：center和margin：0自動不適用於絕對定位的元素
[英]Text-align:center and margin:0 auto not working on absolute positioned elements
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.