我正在尝试使用位于 html 页面底部的 Boostrap 导航选项卡和顶部的内容，请参阅代码。 我希望标签与页脚保持在同一水平。我无法正确理解，它们似乎出现在页脚上方。 此外，选项卡会根据显示器分辨率不断上下移动。 我希望这项工作可以在笔记本电脑和台式机屏幕上进行。 HTML 标记如下
https://jsfiddle.net/iranew/1945yof2/
谁能帮我实现这个目标。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
</style>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100%;
}
.container {
width: 100%;
height: 100%;
position: absolute;
box-shadow: 1px 1px 5px #bbb;
z-index: 0;
}
.first{
z-index: 1;
}
ul{
position: absolute;
bottom: 0;
}
li{
position: relative;
list-style: none;
float: left;
padding: 24px 0px;
}
a{
padding: 24px 50px;
font-family: sans-serif;
text-decoration: none;
color: #222;
background-color: #ddd;
border: solid 1px #bbb;
}
.nav-tabs>li>a {
border-bottom-left-radius: 4px;
border-bottom-right-radius:44px;
border-top-left-radius:0;
border-left-top-radius:0
}
.nav>li>a {
padding: 10px 35px;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover
{
border: 1px solid #ddd;
border-top-color: transparent;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
</style>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<div class="tab-content" style="width:100%;height:80vh; border:1px solid black">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div>
<ul class="nav nav-tabs nav-tabs-bottom sticky-footer " style="float:left">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<footer class="sticky-footer bg-white" id="footer">
<div class="container my-auto" style="max-width:100%; ">
<div class="copyright text-left font-weight-bold" style="float:right;">
<span class="float-right" style="padding-right:50px">@footer</span>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>最佳答案
这是代码。希望它能帮助你。如果有任何变化，请告诉我。
https://jsfiddle.net/5y2j09kx/5/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100%;
}
.container {
width: 100%;
height: 100%;
box-shadow: 1px 1px 5px #bbb;
z-index: 0;
}
.first {
z-index: 1;
}
ul li {
display: inline-block;
}
li {
position: relative;
list-style: none;
}
a {
padding: 24px 50px;
font-family: sans-serif;
text-decoration: none;
color: #222;
background-color: #ddd;
border: solid 1px #bbb;
}
.nav-tabs>li>a {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 44px;
border-top-left-radius: 0;
border-left-top-radius: 0
}
.nav>li>a {
padding: 10px 35px;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
border: 1px solid #ddd;
border-top-color: transparent;
}
.tab-wrap {
border: 1px solid black
}
#footer {
/* position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; */
}
.footer-navbar {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<div class="tab-wrap">
<div class="tab-content" style="width:100%;height:80vh;">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class="footer-navbar">
<ul class="nav nav-tabs nav-tabs-bottom sticky-footer">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<footer class="sticky-footer bg-white" id="footer">
<div class="container my-auto" style="max-width:100%; ">
<div class="copyright text-left font-weight-bold" style="float:right;">
<span class="float-right" style="padding-right:50px">@footer</span>
</div>
</div>
</footer>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>关于html - 对于小分辨率屏幕，网页底部的 Bootstrap 导航选项卡不会停留在底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59242576/