引导3中心样式尝试失败
引导3中心样式尝试失败
提问于 2014-10-23 16:22:54
这是完整的用于我的代码的jsFiddle。
我在试着把脚放在中间。注意，主页脚链接是从它们各自的“列领导”(“一”、“二”、“三”和“四”)缩进的；即使所有的内容都是居中的，我仍然需要保留缩进。
在页脚div周围放置<center>标记并不能满足我的需要.我需要4个列领导，加上以<hr/>为中心的版权/隐私/服务链接；此外，我还需要列链接(在前面)缩进4-5个空格。
有人能帮我提供必要的CSS调整来实现我的目标吗？我快疯了，想弄明白这一点！
在我的脑海中，我担心我的JS可能以某种方式抛出了一个错误，并可能导致浏览器无法正确呈现：
$('#fieldModePopover').popover({
content: function() {
return "Yahtzee!";
}
});回答 1
Stack Overflow用户
发布于 2014-10-23 18:50:21
我认为你需要4列在页脚和整个页脚应该是centered.Please，让我知道如果是这样的话，我会尝试解释的事情。
<!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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26532727
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号