1

我现在正在为我们的项目工作几天。一切都很好-但布局不行。

在我的布局中，左侧有一个徽标，中间有一个导航栏，右侧有登录/注销/注册链接。

我的问题是，我无法将导航栏居中，如果我尝试，那么它仅适用于我的显示分辨率，例如，如果我放大或缩小，它会变坏。

这也很好，但我不知道该怎么做。

如果有人可以帮助我，我会非常高兴。

提前致谢。

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>
4

1 回答 1

0

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

于 2013-12-15T09:15:56.880 回答