Typo3 BootStrap 3 导航栏（打字错误）

Question

您好，我是打字新手，我需要帮助才能使菜单正常工作。以下拼写错误将呈现 Bootstrap 导航栏，但菜单会完全脱离导航栏而没有 css 样式。

topnavigation = HMENU
topnavigation.wrap (

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container"> 
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="http://www.example.com">Brand</a></div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">

      </ul>
    </div>
  </div>
</nav>

)
  topnavigation.entryLevel = 0
  topnavigation {
    1= TMENU
    1 {
      expAll = 1
      maxItems = 4
      NO.wrapItemAndSub = <li>|</li>

      ACT = 1
      ACT.wrapItemAndSub =  <li class="active">|</li>            

      IFSUB = 1
      IFSUB.wrapItemAndSub = <li class="dropdown">|</li>

      ACTIFSUB = 1
      ACTIFSUB.wrapItemAndSub= <li class="active dropdown">|</li>

    }    
    2= TMENU
    2 {
      wrap = <ul class="dropdown-menu">|</ul>
      NO.wrapItemAndSub = <li>|</li>

      ACT = 1
      ACT.wrapItemAndSub =  <li class="active">|</li>

    }    
  }

请帮忙

Answer 1

您的 topnavigation.wrap 任何地方都没有管道符号...

每个包装应在包装内容应放置的位置使用管道符号 |，即在您的 TMENU 中：

NO.wrapItemAndSub = <li>|</li>

无论如何，您的 general wrap 整个 Bootstrap 标记都没有，这很可能是渲染错误的原因...

很可能应该在某处：

   ...
      <ul class="nav navbar-nav">|</ul>
   ...

顺便说一句，使用浏览器的检查器工具检查缺少的内容，我们只能猜测。

Answer 2

Biesior，感谢管道建议，它确实让我朝着正确的方向前进。经过大量的研究和黑客攻击（不是编码员和打字错误的外星人），我设法让 bootstrap 3 反向导航栏在 typo3 中正常工作。

以下代码开箱即用。

topnavigation = HMENU
topnavigation.wrap (

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://www.example.com">Your Company Name or Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">|</ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

  )
topnavigation.entryLevel = 0
topnavigation {
    1 = TMENU
    1 {
    expAll = 1
     
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
     
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
     
    IFSUB = 1
    IFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    IFSUB.after = <b class="caret"></b></a>
    IFSUB.doNotLinkIt = 1
    IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
    IFSUB.ATagTitle.field = abstract // description // title
     
    ACTIFSUB = 1
    ACTIFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    ACTIFSUB.after = <b class="caret"></b></a>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li>
    ACTIFSUB.ATagTitle.field = abstract // description // title
     
    }
     
    2 = TMENU
    2 {
    expAll = 1
     
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
     
    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub = |
    ACTIFSUB.before = <li class="divider"></li><li class="nav-header">
    ACTIFSUB.after = </li>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.ATagTitle.field = abstract // description // title
     
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
     
    IFSUB = 1
    IFSUB.before = <li class="divider"></li><li class="nav-header">
    IFSUB.after = </li>
    IFSUB.doNotLinkIt = 1
    IFSUB.ATagTitle.field = abstract // description // title
     
    SPC = 1
    SPC.allWrap = <li class="divider"></li><li class="nav-header">|</li>
     
    wrap = <ul class="dropdown-menu">|</ul>
    }
     
    3 = TMENU
    3 {
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
     
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
    }
  }

记得在主页里参考扩展(fileadmin/your_template/layouts/your_main_page.html)

<f:cObject typoscriptObjectPath="topnavigation" />

Typo3 BootStrap 3 导航栏（打字错误）

Typo3 BootStrap 3 navbar (typoscript)

twitter-bootstrap-3

typo3

navbar

typoscript