时间戳

首页 > 解决方案 > 如何在引导程序 3 中创建响应式/粘性页脚？

javascript - 如何在引导程序 3 中创建响应式/粘性页脚？

问题描述

我有页脚与链接。我能够获得粘性页脚，但是当屏幕xs或sm链接溢出页脚区域时。这是示例：

html,
body {
  height: 100%;
}

.wrapper {
  min-height: calc(100vh - 40px);
}

.page-footer {
  height: 40px;
  margin-bottom: 5px;
  background-color: #333;
  padding: 5px;
  color: blue;
}
<!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">
  <title>Single Page Application</title>
  <link rel="icon" type="image/x-icon" href="images/favicon.ico" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
        <div class="row">
          <div class="col-xs-4 col-sm-6">
            <a class="navbar-brand" data-toggle="tooltip" data-placement="top" title="MyApp home page" href="https://www.example.com" target="_blank"><img class="img-rounded" src="images/logo.png" alt="MyApp" /></a>
          </div>
          <div class="col-xs-4 col-md-6">
            <img class="img-rounded brand2" src="images/app.jpg" alt="Img" />
          </div>
        </div>
      </div>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="nav navbar-nav" id="nav_menu">
          <li><a href="#" data-id="home">Home</a></li>
          <li><a href="#" data-id="contact">Contact</a></li>
          <li><a href="#" data-id="help">Help</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="wrapper">
    <div class="container">
      <div class="jumbotron my-jumbotron">
        <h2>Single Page Application</h2>
      </div>
      <div id="main_container">
        <ul class="nav nav-tabs nav-justified">
          <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
          <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
          <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
          <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
        </ul>
        <div class="tab-content">

          <div id="tab1" class="tab-pane my-tab-pane fade in active">
            <h3>Tab 1</h3>
            <p>Show tab 1.</p>
          </div>

          <div id="tab2" class="tab-pane my-tab-pane fade">
            <h3>Tab 2</h3>
            <p>Show tab 2.</p>
          </div>

          <div id="tab3" class="tab-pane my-tab-pane fade">
            <h3>Tab 3</h3>
            <p>Show tab 3.</p>
          </div>

          <div id="tab4" class="tab-pane my-tab-pane fade">
            <h3>Tab 4</h3>
            <p>Show tab 4.</p>
          </div>
        </div>

      </div>
    </div>
  </div>
  <footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
          <a href="http://link1/" data-toggle="tooltip" data-placement="top" title="Link 1">Link 1</a>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
          <a href="http://link2/" data-toggle="tooltip" data-placement="top" title="Link 2">Link 2</a>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
          <a href="http://link3/" data-toggle="tooltip" data-placement="top" title="Link 3">Link 3</a>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
          <a href="http://link4/" data-toggle="tooltip" data-placement="top" title="Link 4">Link 4</a>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
          <p class="text-center">&copy; Copyright Name 2018</p>
        </div>
      </div>
    </div>
  </footer>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

正如您在示例中看到的那样，它们是垂直堆叠的。我想知道如何组织页脚链接？是否有显示隐藏链接或使页脚滚动的选项？

标签： javascripthtmlcsstwitter-bootstrapnavbar

解决方案

首先，您可以在页脚上使用 bootstrap 类navbar-fixed-bottom，如果它是一个小的固定页脚，我认为在页脚中使用 bootrap 不是一个好方法，它不是设计用来的。

但是如果你想让它滚动，你可以overflow-y: scroll;在你的 css 类中添加一个。.page-footer我个人建议将页脚重写为水平的。

html,
body {
  height: 100%;
}

.wrapper {
  min-height: calc(100vh - 40px);
  margin-bottom: 50px;
}

.page-footer {
  height: 40px;
  margin-bottom: 5px;
  background-color: #333;
  padding: 5px;
  color: blue;
  overflow-y: scroll;
}

.copyright {
  margin-top: 2px;
  ;
}
<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">
  <title>Single Page Application</title>
  <link rel="icon" type="image/x-icon" href="images/favicon.ico" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
        <div class="row">
          <div class="col-xs-4 col-sm-6">
            <a class="navbar-brand" data-toggle="tooltip" data-placement="top" title="MyApp home page" href="https://www.example.com" target="_blank"><img class="img-rounded" src="images/logo.png" alt="MyApp" /></a>
          </div>
          <div class="col-xs-4 col-md-6">
            <img class="img-rounded brand2" src="images/app.jpg" alt="Img" />
          </div>
        </div>
      </div>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="nav navbar-nav" id="nav_menu">
          <li><a href="#" data-id="home">Home</a></li>
          <li><a href="#" data-id="contact">Contact</a></li>
          <li><a href="#" data-id="help">Help</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="wrapper">
    <div class="container">
      <div class="jumbotron my-jumbotron">
        <h2>Single Page Application</h2>
      </div>
      <div id="main_container">
        <ul class="nav nav-tabs nav-justified">
          <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
          <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
          <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
          <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
        </ul>
        <div class="tab-content">

          <div id="tab1" class="tab-pane my-tab-pane fade in active">
            <h3>Tab 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper elit sed ante efficitur, ac ultrices erat ullamcorper. Curabitur in luctus libero. Vivamus eu risus ornare, tincidunt elit quis, hendrerit tellus. Duis ut interdum
              tortor, at placerat sapien. Donec quam urna, egestas mollis elementum quis, dignissim non orci. Suspendisse et feugiat massa. Vestibulum eget augue orci. In ultricies, elit et mattis placerat, nulla nibh dignissim odio, sit amet efficitur
              turpis ex eu sapien. Donec id metus egestas sapien varius consectetur ac vitae est. Sed tincidunt ultrices justo in malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vulputate vitae
              urna vel interdum. Integer semper nisl nec dolor volutpat, a pulvinar mauris scelerisque. Suspendisse non augue tincidunt, bibendum nulla eget, ultrices erat. Vivamus fermentum ornare tortor, eget convallis nisl finibus ac. Pellentesque
              eu dapibus metus, sit amet tristique dolor. Sed vel mauris eros. Nunc sollicitudin erat sit amet dolor eleifend, vel tristique libero porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod vitae risus eu egestas. Proin
              egestas lectus ut varius rhoncus. Aenean vitae commodo quam, et vestibulum magna. Donec scelerisque nec mi suscipit dignissim. Cras est risus, aliquet et molestie in, pretium at neque. Praesent porttitor lobortis hendrerit. Pellentesque
              molestie leo nec orci euismod, varius luctus lorem laoreet. Nullam ex turpis, tincidunt vitae orci at, dictum imperdiet libero. Nunc ligula metus, vestibulum in nisl ac, condimentum vestibulum urna. Nullam aliquet pharetra sem vel malesuada.
              Fusce gravida, ligula sit amet tempus interdum, tortor tortor tincidunt nisl, in porta sem eros ultrices eros. Phasellus in maximus lectus, non sagittis ex. Aenean consequat dignissim rhoncus. Nulla facilisi. Duis fringilla iaculis sollicitudin.
              Sed non sollicitudin tellus. Nunc vitae accumsan massa, tempus tempus tellus. Integer justo magna, tristique porttitor tempor et, tincidunt tempor turpis. Nunc condimentum tincidunt nisi, a porta enim lobortis a. Donec porta mattis ligula
              a vulputate. Phasellus ut eros aliquam, semper neque sit amet, finibus arcu. Mauris bibendum eros vitae diam bibendum maximus. Pellentesque faucibus blandit leo sit amet maximus. Ut condimentum risus dui, sed scelerisque sem hendrerit id.
              Suspendisse dolor ante, dictum ac velit sed, ultricies varius risus. Phasellus bibendum dui ultricies dolor aliquam mollis. Sed ut auctor ligula. Aliquam vestibulum, lacus a ornare lobortis, elit metus placerat neque, id sodales lectus lectus
              id lacus. Suspendisse vitae enim rutrum, interdum lorem eget, feugiat enim. Morbi sit amet rutrum enim. Curabitur facilisis est dolor, in aliquam est varius at. Aliquam aliquam est a eros eleifend maximus. Nam rutrum urna non enim mollis
              consectetur. Maecenas tellus nisi, maximus vel tortor at, commodo fringilla orci. Nulla pretium eget lorem et consequat. Integer vulputate metus porttitor, gravida lectus eu, mattis dui. Maecenas porttitor semper leo fringilla porttitor.
              Aenean faucibus molestie risus, ac pulvinar sem posuere sit amet.</p>
          </div>

          <div id="tab2" class="tab-pane my-tab-pane fade">
            <h3>Tab 2</h3>
            <p>Show tab 2.</p>
          </div>

          <div id="tab3" class="tab-pane my-tab-pane fade">
            <h3>Tab 3</h3>
            <p>Show tab 3.</p>
          </div>

          <div id="tab4" class="tab-pane my-tab-pane fade">
            <h3>Tab 4</h3>
            <p>Show tab 4.</p>
          </div>
        </div>

      </div>
    </div>
  </div>
  <footer class="page-footer navbar-fixed-bottom">
    <div class="container">
      <div class="row">
        <div class="col-xs-2">
          <a href="http://link1/" data-toggle="tooltip" data-placement="top" title="Link 1">Link 1</a>
        </div>
        <div class="col-xs-2">
          <a href="http://link2/" data-toggle="tooltip" data-placement="top" title="Link 2">Link 2</a>
        </div>
        <div class="col-xs-2">
          <a href="http://link3/" data-toggle="tooltip" data-placement="top" title="Link 3">Link 3</a>
        </div>
        <div class="col-xs-2">
          <a href="http://link4/" data-toggle="tooltip" data-placement="top" title="Link 4">Link 4</a>
        </div>
        <div class="col-xs-12 copyright">
          <p class="text-center">&copy; Copyright Name 2018</p>
        </div>
      </div>
    </div>
  </footer>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

推荐阅读