以下是完整的jsFiddle for my code。
我试图将页脚居中。请注意，主页脚链接从各自的“列引导”（“ONE”，“TWO”，“THREE”和“FOUR”）缩进;即使所有内容都居中，我仍然需要保留缩进。
在页脚div周围放置<center>标签并不能满足我的需要......我需要4列引导，加上<hr/>，以及中心的版权/隐私/服务链接;此外，我需要列链接（在领导下）缩进4 - 5个空格。
任何人都可以帮我提供必要的CSS调整来实现我的目标吗？我正在试图解决这个问题！
在我的脑海里，我担心我的JS可能会以某种方式抛出错误，并可能导致浏览器无法正确呈现：
$('#fieldModePopover').popover({
content: function() {
return "Yahtzee!";
}
});
答案 0 :(得分：0)
我认为你需要4个页脚，整个页脚应该居中。请告诉我，如果是这样，我会尝试解释一下。
<!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>MyApp</title>
<!-- External CSS to include. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
* {
margin: 0;
}
/*
* Colors:
* Dark Blue: rgb(12,66,144)
* Light Blue: rgb(176,205,249)
*/
/*html, body {
height: 100%;
}*/
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.rowc{
text-align: center;
background-color: red;
}
.colc{
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
.navbar-inverse {
background: rgb(12,66,144);
border: solid 1px rgb(12,66,144);
}
.navbar-inverse .navbar-brand {
color: rgb(176,205,249);
}
.navbar-inverse .navbar-nav > li > a {
color: rgb(176,205,249);
}
.nav .signin {
position:absolute;
top:0;
right:0;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
min-height: 200px;
}
.footer {
color: rgb(176,205,249);
background: rgb(12,66,144);
border-top: solid 5px rgb(176,205,249);
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
.spacer {
margin-top: -10px;
}
hr {
color: rgb(176,205,249);
}
.right-pinned-col {
position:absolute;
right: 235px;
}
.field-mode {
color: rgb(255,102,0);
}
.fieldModePopover{
width:200px;
height:250px;
}
.field-mode-header {
border: solid 3px rgb(255,102,0);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container-fluid">
<!-- Header and main nav. -->
<!-- If in Field Mode, append a "field-mode-header" class to this nav element below. -->
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="#">My<b>App</b></a>
</div>
<div>
<ul class="nav navbar-nav">
<li>
<a class="dropdown" data-toggle="dropdown" href="#">Fizz <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Who we are</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">What we do (best)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Demo</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">FAQ</a></li>
</ul>
</li>
<li>
<a class="dropdown" data-toggle="dropdown" href="#">Buzz <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Ask a question</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Apply for work</a></li>
</ul>
</li>
<li>
<a class="dropdown" data-toggle="dropdown" href="#">Foo <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Bar</a></li>
</ul>
</li>
<li>
<a id="fieldModePopover" href="#" data-html="true"
data-content="In <b>Field Mode</b>, you may continue to use this app, however you are not connected to our backend. All data will be saved locally to your computer. To sync this data remotely you will need to sign back in and send it once you have a network connection."
rel="popover" data-placement="right"
data-original-title="<b>Field Mode is Activated</b>" data-trigger="hover">
<span class="field-mode glyphicon glyphicon-road"></span>
</a>
</li>
<li class="signin">
<a id="popoverData" href="#" data-html="true" data-content="<input class='form-control' placeholder='username'>" rel="popover" data-placement="bottom" data-original-title="Sign in to your account" data-trigger="click"><span class="glyphicon glyphicon-user"></span> Sign In | Register</a>
</li>
</ul>
</div>
</nav>
<!-- Page content. -->
<div class="jumbotron">
<div class="container">
<h1>My<b>App</b></h1>
<p>
The greatest app ever written by Smeeb.
</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more »</a></p>
</div>
</div>
</div>
</div>
<!-- Footer. -->
<footer class="footer img-rounded">
<div class="container">
<div class="row rowc">
<div class="col-md-3 colc">
<b>ONE</b>
<div class=""> 1-Minute Video</div>
<div class=""> 5-Minute Video</div>
<div class=""> Demo</div>
<div class=""> FAQ</div>
</div>
<div class="col-md-3 colc">
<b>TWO</b>
<div class=""> Ask a Question</div>
<div class=""> Apply</div>
</div>
<div class="col-md-3 colc">
<b>THREE</b>
<div class=""> Bar</div>
</div>
<div class="col-md-3 colc">
<b>FOUR</b>
<div class=""> Blog</div>
<div class=""> Social: <img src="fb.png" /></div>
<div class=""> Wiki</div>
<div class=""> Sitemap</div>
</div>
</div>
<div class="row">
<div class="col-md-7 col-md-offset-3"><hr/></div>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-3">
<span class="glyphicon glyphicon-copyright-mark"></span>
Smeeb 3050
</div>
<div class="col-md-2 right-pinned-col">Privacy Policy | Terms of Service</div>
</div>
</div>
</footer>
<!-- Scripts to include. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="auditcloud.js"></script>
</body>
</html>