Jquery 引导3中心样式设置尝试失败
这是全文 我正在尝试将页脚居中。请注意，主页脚链接从其各自的“列引线”（“一”、“二”、“三”和“四”）缩进；我仍然需要保留缩进，即使在所有东西都居中之后 将Jquery 引导3中心样式设置尝试失败,jquery,css,twitter-bootstrap,twitter-bootstrap-3,Jquery,Css,Twitter Bootstrap,Twitter Bootstrap 3,这是全文 我正在尝试将页脚居中。请注意，主页脚链接从其各自的“列引线”（“一”、“二”、“三”和“四”）缩进；我仍然需要保留缩进，即使在所有东西都居中之后 将标记放在页脚div周围并不能满足我的需要…我需要4列标题，加上，再加上以版权/隐私/服务为中心的链接；此外，我需要列链接（在引线下）缩进4-5个空格 有人能为我提供必要的CSS调整来实现我的目标吗？我想弄清楚这件事，真是疯了 在我内心深处，我担心我的JS可能会以某种方式抛出错误，并可能导致浏览器无法正确呈现： $('#fieldModePo
$('#fieldModePopover').popover({
content: function() {
return "Yahtzee!";
}
});
我想你需要在页脚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>
MyApp
* {
保证金：0；
}
/*
*颜色：
*深蓝色:rgb(12,66144)
*浅蓝色：rgb（176205249）
*/
/*html，正文{
身高：100%；
}*/
html{
位置：相对位置；
最小高度：100%；
}
身体{
/*按页脚高度排列的页边距底部*/
边缘底部：60px；
}
.rowc{
文本对齐：居中；
背景色：红色；
}
colc先生{
/*重置文本对齐*/
文本对齐：左对齐；
/*内联块空间修复*/
右边距：-4px；
}
.导航条反转{
背景:rgb(12,66144),；
边框：实心1px rgb（12,66144）；
}
.navbar反向。navbar品牌{
颜色：rgb（176205249）；
}
.navbar反向。navbar导航>li>a{
颜色：rgb（176205249）；
}
海军签名{
位置：绝对位置；
排名：0；
右：0；
}
.包装纸{
最小高度：100%；
高度：自动！重要；
身高：100%；
保证金：0自动-4em；
}
.footer、.push{
高度：4em；
最小高度：200px；
}
.页脚{
颜色：rgb（176205249）；
背景:rgb(12,66144),；
边框顶部：实心5pxRGB（176205249）；
位置：绝对位置；
底部：0；
宽度：100%；
高度：60px；
}
.垫片{
利润上限：-10px；
}
人力资源{
颜色：rgb（176205249）；
}
.右销孔{
位置：绝对位置；
右：235px；
}
.现场模式{
颜色：rgb（255102,0）；
}
.fieldModePopover{
宽度：200px；
高度：250px；
}
.字段模式标题{
边框：实心3倍rgb（255102,0）；
}
-
-
-
-
-
MyApp
史梅布有史以来最伟大的应用程序。
了解更多信息»
一个
1分钟视频
5分钟视频
演示
常见问题
两个
提问
申请
三
酒吧
四
博客
社会：
维基
网站地图
Smeeb 3050
隐私政策|服务条款
你的小提琴没有更好的引导，你在代码上有很多问题，请把问题限制在帖子中。谢谢你的反馈@ Danko（+ 1）-请看我的编辑，如果你对他们满意，请考虑删除下注。