引导布局 - 不居中且缩放不良

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】:

在引导程序中,如果您将元素放置在 &lt;container&gt; 块中,它们将自动居中并调整大小以适应网格布局。也许这就是您正在寻找的。​​p>

【讨论】:

以上是关于引导布局 - 不居中且缩放不良的主要内容,如果未能解决你的问题,请参考以下文章

NPOI 图片在单元格等比缩放且居中显示

NPOI随笔——图片在单元格等比缩放且居中显示

如何将图像居中和自动缩放?

弹性盒子布局解决不规则图片的等比例缩放的利器!

html百分比布局缩放自适应

iOS 和 Xcode 6:按钮上的自动布局文本缩放