引导布局 - 不居中且缩放不良
Posted
技术标签:
【中文标题】引导布局 - 不居中且缩放不良【英文标题】:Bootstrap layout - not centered and bad zooming 【发布时间】:2013-04-22 01:15:25 【问题描述】:我现在已经为我们的项目工作了几天。一切正常 - 但布局不行。
在我的布局中,左侧是徽标,中间是导航栏,右侧是登录/注销/注册链接。
我的问题是,我无法将导航栏居中,如果我尝试,那么它仅适用于我的显示分辨率,例如如果我放大或缩小,它就会变坏。
This也很好看,就是不知道怎么弄。
如果有人可以帮助我,我会非常高兴。
提前致谢。
HTML
<body>
<div class="row">
<div class="span3">
<img src="/resources/img/logos/bb_logotype_blue_110.png" />
</div>
<div class="span6">
<!-- NavBar -->
<ul id="navbar">
<li><a href="#">Product</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="span3"></div>
<div id="nav-account" class="nav-collapse pull-right">
<ul class="nav">
<li><a id="register" href="/register">Register</a></li>
<li><a id="login" href="/login/form">Login</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="margin-top:3em">
<h1 id="title"></h1>
... some stuff ...
</div>
CSS
<style>
body
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
#navbar li
display: inline;
border-right: 2px solid black;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
font-size: 16pt;
#navbar li:last-child
border-right: 0;
padding-right: 0;
</style>
【问题讨论】:
【参考方案1】:在引导程序中,如果您将元素放置在 <container>
块中,它们将自动居中并调整大小以适应网格布局。也许这就是您正在寻找的。p>
【讨论】:
以上是关于引导布局 - 不居中且缩放不良的主要内容,如果未能解决你的问题,请参考以下文章