Bootstrap 对于小分辨率屏幕，网页底部的导航标签不会停留在底部

Question

我正在尝试使用位于 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>

Answer 1

这是代码。希望它能帮助你。如果有任何变化，请告诉我。

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>

Answer 2

从容器 class 中删除 css 属性并删除 css 表单标签内容标签，因为页脚已经处于绝对位置我们不需要在标签中给出高度 - content to move footer at bottom if you ant to giving some height 给 min-height:80vh

<!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%;
 }
 .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">
    <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>
   
        <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>

</body>
</html>

Answer 3

可能是由于ul和li css。我也做了必要的修改。

<!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%;
            box-shadow: 1px 1px 5px #bbb;
        }

        .first {
            z-index: 1;
        }



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

        .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: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: white;
            color: black;
            text-align: center;
        }
    </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 class="footer">
            <ul class="nav nav-tabs nav-tabs-bottom sticky-footer list-group" 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>
            <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>
        </div>
    </div>

</body>

</html>

Bootstrap 对于小分辨率屏幕，网页底部的导航标签不会停留在底部

Bootstrap nav tabs at bottom of web page do not stay at bottom for small resolution screens

html

css

tabs

nav