Question

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

然而，我有点难过为什么导航栏经常处于崩溃状态。我哪里做错了？ 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标题，只保留手机样式按钮。这被传播到主导航部分，当使用渲染时，创建这些按钮。将其更新为主题允许按钮打印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>

Bootstrap导航栏总是折叠为Drupal主题

1 个答案: