html - Bootstrap 2 - 折叠响应式菜单 Logo 并在同一行切换

Question

不幸的是，我在这个元素中一直使用 Bootstrap 2。一旦我的导航栏折叠到“电话”级别，我很难让 Logo (.brand) 和导航在同一行切换。

我已经尝试将 .row 更改为 .row-fluid，但是 .span6 元素仍在折叠并跨越整个导航栏缩小到“手机”大小后的宽度。

这是我目前拥有的标记:

<div id="header-row">
    <div class="container">
      <div class="row-fluid">
              <!--LOGO-->
              <div class="span3"><a class="brand" href="/"><img src="img/logo.png"/></a></div>
              <!-- /LOGO -->

            <!-- MAIN NAVIGATION -->  
              <div class="span9">
                <div class="navbar  pull-right">
                  <div class="navbar-inner">
                    <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
                    <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav">
                        <li<?php if($current_file == 'index.php') {echo ' class="active"';}?>><a href="/">Home</a></li>

                        <li><a href="/#payback-time">Payback Time</a></li>
                        <li<?php if($current_file == 'funding.php') {echo ' class="active"';}?>><a href="/funding.php">Funding Options</a></li>
                        <li<?php if($current_file == 'supply-and-installation.php') {echo ' class="active"';}?>><a href="/supply-and-installation.php">Supply and Installation</a></li>
                        <li<?php if($current_file == 'contact.php') {echo ' class="active"';}?>><a href="/contact.php">Contact</a></li>

                    </ul>
                  </div>

                  </div>
                </div>
              </div>
            <!-- MAIN NAVIGATION -->  
      </div>
    </div>
  </div>

我还有一些由我正在使用的主题设置的自定义导航栏属性:

#header-row{
    background: #f5f5f5;
    border-bottom:1px solid #eee;
    padding: 15px 0;
}

#header-row .navbar{margin:10px 0 0 0;}

#header-row .navbar .navbar-inner{
    border:none;
    box-shadow: none;
    margin: 0;
    background: transparent;
}

#header-row .navbar .navbar-inner ul.nav > li > a{
    box-shadow: none;
    background: transparent;
    color: #90c57b;
}
#header-row .navbar .navbar-inner ul.nav li.active a{
    color: #333;
}

Live code demo

Answer 1

您需要做的就是遵循 bootsrap 导航栏结构。现在您的 Logo 位于导航栏之外，因此它显示为 block 元素，导航栏也是如此。这是一个如何设置 bootstrap 2 导航栏的工作示例。你的 css 应该和它一样工作，但你可能需要重新设计一些东西，但不确定插入它并试一试。

<div id="header-row">
    <div class="container">
      <div class="row-fluid">
        <nav class="navbar navbar-default">
          <div class="navbar-inner">
            <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>
            <a class="brand" href="#"><img src="http://crf.jamesallison.co/img/logo.png" /></a>
            <div class="nav-collapse collapse">
              <ul class="nav  pull-right" role="navigation">
              <li <?php if($current_file == 'index.php') {echo ' class="active"';}?>><a href="/">Home</a></li>
              <li><a href="/#payback-time">Payback Time</a></li>
              <li <?php if($current_file == 'funding.php') {echo ' class="active"';}?>><?php if($current_file == 'funding.php') {echo ' class="active"';}?><a href="/funding.php">Funding Options</a></li>
              <li <?php if($current_file == 'supply-and-installation.php') {echo ' class="active"';}?>><a href="/supply-and-installation.php">Supply and Installation</a></li>
              <li <?php if($current_file == 'contact.php') {echo ' class="active"';}?>><a href="/contact.php">Contact</a></li>
              </ul>
            </div>
          </div>
       </nav> <!-- /navbar-end -->
    </div>
  </div>
</div>

这应该使 Logo 和菜单汉堡包在移动屏幕尺寸下保持在同一行