css - 更改 Bootstrap 2.0.4 响应式导航栏宽度

Question

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

能得到答案真的很高兴，因为我还没有发现任何有用的东西。

问候，多米尼克

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

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

Answer 1

好的，我明白了。我使用了固定的导航栏，但没有按预期工作。您必须使用静态导航栏。然后你可以只使用引导程序中的行/脚手架系统。

导航栏左侧徽标的示例代码：

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

为了让我的 Logo 具有响应性，我添加了以下 CSS 规则：

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

}

Answer 2

是的，当然——您需要重新构建文档以在导航栏上方放置（例如）一个带有 span4 类的 div。

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

如果您可以更具体地了解您想要什么，和/或提供您网站的相关部分 (HTML)，我可能会给出更多指导。