对于 Drupal 主题，Bootstrap 导航栏总是折叠

Question

我正在尝试将 Drupal 的 Open Framework theme 从 Bootstrap 2.3.1 升级到 Bootstrap 3.1.1。我已经完成了从 span* 到 col-md-* 的大部分简单转换，将 row-fluid 更改为 row 等等......

但是，我对为什么导航栏一直处于折叠状态感到有些困惑。我哪里做错了？ entire project is forked at GitHub。

这是page.tpl.php的相关部分

<div id="main-menu" class="clearfix site-main-menu">
  <div class="container">
    <div class="navbar">
      <?php if ($main_menu): ?>

      <div class="container">
        <?php endif; ?>
        <?php if ($page['search_box']): ?>
        <div id="nav-search" class="nav-search"> <?php print render($page['search_box']); ?> </div>
        <?php endif; ?>
        <?php if ($main_menu): ?>
        <button class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <?php if ($primary_nav || !empty($page['navigation'])): ?>
        <div class="nav-collapse collapse">
          <nav id="main-nav" role="navigation">
            <?php if (($primary_nav) && empty($page['navigation'])): ?>
            <?php print render($primary_nav); ?> 
            <!-- /#primary-menu -->
            <?php endif; ?>
            <?php if (!empty($page['navigation'])): ?>
            <?php print render($page['navigation']); ?>
            <?php endif; ?>
          </nav>
        </div>
        <?php endif; ?>
        <?php endif; ?>
        <?php if ($main_menu): ?>
      </div>
      <?php endif; ?>
    </div>
  </div>
</div>

Answer 1

这里最大的问题是将所有 div 类和元素转换为新的 Bootstrap 3.1.1 类并放弃旧类。项目总是显示为折叠的原因是折叠的元素和折叠的按钮使用的是旧样式。

将按钮更改为新样式隐藏了按钮并创建了默认的 Bootstrap 3.1.1 标题，只留下手机样式按钮。这被传播到 Primary Nav 部分，该部分在使用渲染时创建了这些按钮。将其更新为主题允许按钮以 Bootstrap 3.1.1 样式打印。这些更改在 GitHub 项目上可供检查，代码段已在下面复制（尽管仍需要更新页面导航部分）。

<div id="header" class="clearfix header" role="banner">
  <div class="container">
    <div class="row">
      <div class="<?php if ($page['search_box']): print 'col-md-8'; else: print 'col-md-12'; endif; ?>">
        <?php if ($logo): ?>
          <div id="logo" class="site-logo"> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"> <img src="<?php print $logo; ?>" alt="<?php print $site_name; ?>" role="presentation" /> </a></div>
        <?php endif; ?>
        <!-- /#logo -->
        <?php if ($site_name || $site_slogan): ?>
        <div id="name-and-slogan">
          <?php if ($site_name): ?>
          <div id="site-name" class="site-name"><a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><?php print $site_name; ?></a></div>
          <?php endif; ?>
          <?php if ($site_slogan): ?>
            <div id="site-slogan" class="site-slogan"><?php print $site_slogan; ?></div>
          <?php endif; ?>
        </div>
        <?php endif; ?>
        <?php if (!($site_name || $site_slogan)): ?>
          <div id="site" class="hide">
            <div id="name"><a href="<?php print $front_page; ?>"><?php print $my_site_title; ?></a></div>
          </div>
        <?php endif; ?>
        <!-- /#name-and-slogan -->
        <?php if ($page['header']): ?>
          <div id="header-content" class="row header-content"><?php print render($page['header']); ?></div>
          <!-- /#header-content -->
        <?php endif; ?>
      </div>
    </div>
  </div>
</div>