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

Question

我正在使用 Twitter Bootstrap 2.0.4 + bootstraps responsive.css 创建一个站点。我不知道的是:是否有可能在网站的左上角出现一个 Logo ，而在 Logo 的右侧出现一个导航栏(但固定在顶部)？更改大小时， Logo 应出现在导航栏的顶部。

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

您好，多米尼克

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

标志在左边，然后是导航栏。

Answer 1

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

导航栏左侧 Logo 的示例代码:

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