我有一个页脚带有链接的页面。我能够获得粘性页脚，但是当屏幕为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">© 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>
如示例所示，它们是垂直堆叠的。我想知道如何组织页脚链接？是否可以显示隐藏链接或使页脚滚动？
答案 0 :(得分：3)
首先，您可以在页脚上使用引导程序类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">© 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>
答案 1 :(得分：0)
就是这样。在您的page-footer类中添加另一个类，例如
<footer class="page-footer navbar-fixed-bottom">