Question

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

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

我的问题是，如果我尝试的话，我无法将导航栏置于中心位置，那么只有我的显示分辨率可以正常，例如如果我放大或缩小，它就会变坏。

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>

Answer 1

在bootstrap中，如果将元素放在<container>块中，它们将自动居中并调整大小以适应网格布局。也许这就是你要找的东西。

Bootstrap布局 - 不居中和不良缩放

1 个答案: