Question

不幸的是，我坚持使用Bootstrap 2来完成这个项目。一旦我的导航栏折叠到“手机”级别，我很难在同一行上同时使用徽标（.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导航栏结构。此时您的徽标位于导航栏之外，因此它显示为块元素，导航栏也是如此。这是一个如何设置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>

这应该将徽标和菜单汉堡包保持在移动屏幕尺寸的同一行

Bootstrap 2 - 折叠的响应式菜单徽标并在同一行上切换

1 个答案: