Question

我正在使用Twitter Bootstrap 2.0.4 + bootstraps responsive.css创建一个站点。我不知道的是：是否有可能在网站的左上角出现徽标，并且导航栏出现在徽标的右侧（但是固定在顶部）？在更改尺寸时，徽标应显示在导航栏的顶部。

得到答案我真的很高兴我还没找到任何有用的东西。

问候，多米尼克

编辑：这是描述我想要实现的目标的图片：http://i.imgur.com/HX3ZM.png

左侧的徽标，然后是导航栏。

Answer 1

好的，我明白了。我使用固定导航栏，但没有按预期工作。您必须使用静态导航栏。然后你可以使用bootstrap中的row / scaffolding系统。

导航栏留下徽标的示例代码：

   <div class="row-fluid">
    <div class="span3">
      <p><img src="/sites/img/your_logo.png" alt="Logo" class="responsive-logo"></p>
    </div>
    <div class="span9">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <div class="btn-group pull-right">
              <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                <i class="icon-user"></i> Username
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#">Profile</a></li>
                <li class="divider"></li>
                <li><a href="#">Sign Out</a></li>
              </ul>
            </div>
            <div class="nav-collapse">
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div><!-- end navbar -->
    </div><!-- end span8 -->
  </div><!-- end row -->

为了使我的徽标响应，我添加了以下css规则：

  .responsive-logo {
max-width: 100%;
height: auto;
border: 0;
padding-top: 10px;

}

Answer 2

是的，确定 - 您需要重新构建文档以放置（例如）带有导航栏上方span4类的div。

在下面，有导航栏代码并删除品牌元素（通常包含您的徽标）。我的假设让我相信你想要这样的东西：

Re-designed

如果你可以更具体地了解你想要的东西，和/或提供你网站的相关部分（HTML），我可能会给出更多指示。

更改Bootstrap 2.0.4响应导航栏宽度

2 个答案: