TbNavbar 下拉项中的表单答案

【问题标题】：Form inside TbNavbar Dropdown ItemsTbNavbar 下拉项中的表单
【发布时间】：2026-01-19 06:15:02
【问题描述】：

我正在尝试使用 Yii Bootstrap 添加下拉登录表单，就像附加的教程一样，但我无法将 HTML 表单添加到 TbNavbar items。我该如何适应它？

跟随教程：http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/

代码：

        <?php $this->widget('bootstrap.widgets.TbNavbar',array(
                'items'=>array(
                    array(
                        'class'=>'bootstrap.widgets.TbMenu',
                        'htmlOptions'=>array('class'=>'pull-right'),
                        'items'=>array(
                            array('label'=>'Login', 'url'=>'#', 'visible'=>Yii::app()->user->isGuest, 'items'=>array(
                                'FORM HTML CODE', // here is the problem, the HTML Form is not working.
                            )),
                        ),
                   ),
            )); ?>

【问题讨论】：

标签： php twitter-bootstrap yii

【解决方案1】：

将您的按钮和表单移出TbMenu items 数组并移入TbNavbar items 数组。 TbNavBar 允许 html 但不允许 TbMenu。

    <?php $this->widget('bootstrap.widgets.TbNavbar',array(
            'items'=>array(
                array(
                    'class'=>'bootstrap.widgets.TbMenu',
                    'htmlOptions'=>array('class'=>'pull-right'),
                    'items'=>array(

                    ),
               ),

              '<ul class="nav pull-right">
                   <li><a href="/users/sign_up">Sign Up</a></li>
                   <li class="divider-vertical"></li>
                   <li class="dropdown">
                       <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
                       <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
                          <!-- Login form here -->
                       </div>
                   </li>
               </ul>'
            ),
        )); ?>

【讨论】：

【解决方案2】：

此外，为了尽量减少 html 标记，您还可以使用“模板”数组键：

<?php $this->widget('bootstrap.widgets.TbNavbar',array(
'items'=>array(
    array(
        'class'=>'bootstrap.widgets.TbMenu',
        'htmlOptions'=>array('class'=>'pull-right'),
        'items'=>array(
            array('label'=>'Login', 'url'=>'#', 'visible'=>Yii::app()->user->isGuest, 'items'=>array(
                array(
                    'label'=>'{menu}',
                    'template'=>'<form class="navbar-form pull-left" style="padding-left:15px;padding-right:15px;">
                                    <input type="text" class="span2" placeholder="Login">
                                    <input type="password" class="span2" placeholder="Password">
                                    <button type="submit" class="btn">Submit</button>
                                </form>'
                )
            )),
        ),
    ),
))); ?>

在定义的模板字符串中，您还可以使用 {menu} 占位符来替换您的链接。

【讨论】：