Question

我引用了这个网站http://demos.krajee.com/widget-details/sidenav 我在主布局中添加了kartik导航侧栏，如下所示，但没有正确显示，在第一张图片中我显示了输出＆amp;在下一张图片中我的预期输出。

<?php
use yii\helpers\Url;
use kartik\sidenav\SideNav;
use yii\helpers\Html;
use yii\widgets\Breadcrumbs;
use frontend\assets\AppAsset;
use common\widgets\Alert;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
  <?php
    $menuItems = [
        /*['label' => 'Home', 'url' => ['/site/index']],*/
        /*['label' => 'Contact', 'url' => ['/site/contact']],*/
    ];
    if (Yii::$app->user->isGuest) {

        //$menuItems[] = ['label' => 'Enquiry', 'url' => ['/site/acenquiry']];
        $menuItems[] = ['label' => 'Signup', 'url' => ['/site/signup']];
        $menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
    } else {
        //print_r(Yii::$app->user->id);

        $menuItems[]=[
            'label'=>'Dashboard',
            'url'=>['/site/dashboard','date'=>'1','status'=>'0'],          
        ];
        $menuItems[]=['label' => 'View',
           'items' => [
               ['label' => 'Companies',
                'url' => ['/company']
               ],
               ['label' => 'Projects', 
                'url' => ['/project']
               ],
               ['label' => 'Documents', 
                'url' => ['/quotedocs']
               ],
               ['label' => 'Quotations', 
                'url' => ['/quotations']
               ],
               ['label' => 'Payments', 
                'url' => ['/grptankpayment']
               ],
           ],
           ];
        $menuItems[]=['label' => 'Configuration',
       'items' => [
           ['label' => 'Status Types',
            'url' => ['/status']
           ],
           ['label' => 'Document Types', 
            'url' => ['/doctype']
           ],
           ['label' => 'Task Types', 
            'url' => ['/tasktype']
           ],
       ],
       ];
        $menuItems[]=['label' => 'GRP',
       'items' => [
           ['label' => 'GRP Panels',
            'url' => ['/grptankpanels']
           ],
           ['label' => 'GRP Tools', 
            'url' => ['/grptanktools']
           ],
           ['label' => 'GRP Main Accessories', 
            'url' => ['/grptankaccessories']
           ],
           ['label' => 'GRP Sub Accessories', 
            'url' => ['/grptanksubaccessories']
           ],
       ],
       ];
        $menuItems[]=[
            'label'=>'Company',
            'url'=>['/company/create'],
            'linkOptions' => ['data-method' => 'post']            
        ];
        $menuItems[]=['label' => 'Project',
        'items' => [
            ['label'=>'Create Project',
            'url'=>['/project/create'], 
            ],
            ['label'=>'Project Execution',
            'url'=>['/project-execution/create'], 
            ],         
        ],
        ];
        $menuItems[] = [
            'label' => 'Quotation',
            'url' => ['/quotations/create'],
            'linkOptions' => ['data-method' => 'post']
        ];
        $menuItems[]=[
            'label'=>'Sekisui',
            'url'=>['/grptanksekisui/create'],
            'linkOptions' => ['data-method' => 'post']            
        ];

        $menuItems[] = [
            'label' => 'Docs',
            'url' => ['/quotedocs/create'],
            'linkOptions' => ['data-method' => 'post']
        ];

        $menuItems[] = [
            'label' => 'Payments',
            'url' => ['/grptankpayment/create'],
            'linkOptions' => ['data-method' => 'post']
        ];
        $menuItems[] = [
            'label' => 'My Tasks',
            'url' => ['/task'],
            'linkOptions' => ['data-method' => 'post']
        ];
        $menuItems[] = [
            'label' => 'Logout (' . Yii::$app->user->identity->username . ')',
            'url' => ['/site/logout'],
            'linkOptions' => ['data-method' => 'post']
        ];
    }
    /*echo Nav::widget([
        'options' => ['class' => 'navbar-nav navbar-right'],
        'items' => $menuItems,
    ]);*/

    ?>

    <div class="container">
     <?php echo SideNav::widget([      
      'encodeLabels' => false,     
      'items' => $menuItems,
       'type' => SideNav::TYPE_PRIMARY
      ]); ?>
        <?= Breadcrumbs::widget([
            'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
        ]) ?>
        <?= Alert::widget() ?>
        <?= $content ?>
    </div>


<footer class="footer">
    <div class="container">
        <p class="pull-right">&copy; Test Company <?= date('Y') ?></p>

    </div>
</footer>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

输出图像

应该是这样的：

Answer 1

这很可能是因为您没有指定引导列宽度（col-sm-X）。要获得非常相似的结果，您应该添加2个额外的父div。

而不是：

<div class="container">
     <?php echo SideNav::widget([      
      'encodeLabels' => false,     
      'items' => $menuItems,
       'type' => SideNav::TYPE_PRIMARY
      ]); ?>
        <?= Breadcrumbs::widget([
            'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
        ]) ?>
        <?= Alert::widget() ?>
        <?= $content ?>
    </div>

将是：

<div class="container">
    <div class="col-sm-3">
    <?php echo SideNav::widget([
        'encodeLabels' => false,
        'items' => $menuItems,
        'type' => SideNav::TYPE_PRIMARY
    ]); ?>
    </div>
    <div class="col-sm-9">
    <?= Breadcrumbs::widget([
        'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
    ]) ?>
    <?= $content ?>
    </div>
</div>

我只使用了small，但您可以在这里添加更多选项。

导航侧栏未正确显示

1 个答案: