对齐Kartik Sidenav

时间：2016-02-14 06:14:39

标签： yii widget

我可以在我的主页上看到Kartik Sidenav。现在我希望sideNav继续到页面底部。 并且主要内容在侧面的右侧不在其后面。 SideNav也应该是可折叠的。 我看不出来。请帮忙。我正在附上我的网页的样子。 Home Page Any Page

我的后端/ views / layout / main.php如下所示

<?php

/* @var $this \yii\web\View */
/* @var $content string */

use backend\assets\AppAsset;
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use common\widgets\Alert;
use kartik\sidenav\SideNav;
use yii\helpers\Url;


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() ?>
<div class="wrap">
<?php
NavBar::begin([
    'brandLabel' => 'My Company',
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar-inverse navbar-fixed-top',
    ],
]);
$menuItems = [
    ['label' => 'Home', 'url' => ['/site/index']],
];
if (Yii::$app->user->isGuest) {
    $menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
} else {
    $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,
]);
NavBar::end();
?>

<div class="row">
<div class="col-xs-5 col-sm-4 col-lg-3">


<?php
 echo SideNav::widget([      

'type' => SideNav::TYPE_DEFAULT,
'heading' => 'Operations',


'items' => [
    [
        'url' => Yii::$app->homeUrl,
        'label' => 'Home',
        'icon' => 'home',
    ],
    [
        'url' => 'http://localhost:8080/advanced/backend/web/index.php?r=tc/bills',
        'label' => 'Insert TC',
        'icon' => 'cloud',
    ],

    [
        'label' => 'Help',
        'icon' => 'question-sign',
        'items' => [
            ['label' => 'About', 'icon'=>'info-sign', 'url'=>'#'],
            ['label' => 'Contact', 'icon'=>'phone', 'url'=>'#'],
        ],
    ],
],

 ]);  
?>
</div>       
</div>

<div class="container">
    <?= Breadcrumbs::widget([
        'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
    ]) ?>
    <?= Alert::widget() ?>
    <?= $content ?>
</div>

</div>


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

    <p class="pull-right"><?= Yii::powered() ?></p>
</div>
</footer>

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

1 个答案:

答案 0 :(得分：1)

如果您希望左栏中的SideNav，您必须在容器内正确组织页面。

基本上将您的SideNav <div class="col-xs-5 col-sm-4 col-lg-3"> 移到<div class="container">

中

并将$ content放在剩余列中

<div class="col-xs-7 col-sm-8 col-lg-9">
    <?= $content ?>
</div>
这样...... 

<?php

/* @var $this \yii\web\View */
/* @var $content string */

use backend\assets\AppAsset;
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use common\widgets\Alert;
use kartik\sidenav\SideNav;
use yii\helpers\Url;


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() ?>
<div class="wrap">
<?php
NavBar::begin([
    'brandLabel' => 'My Company',
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar-inverse navbar-fixed-top',
    ],
]);
$menuItems = [
    ['label' => 'Home', 'url' => ['/site/index']],
];
if (Yii::$app->user->isGuest) {
    $menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
} else {
    $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,
]);
NavBar::end();
?>


<div class="container">
      <?= Breadcrumbs::widget([
        'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
    ]) ?>
    <?= Alert::widget() ?>

<div class="col-xs-5 col-sm-4 col-lg-3">


  <?php
   echo SideNav::widget([      

  'type' => SideNav::TYPE_DEFAULT,
  'heading' => 'Operations',


  'items' => [
      [
          'url' => Yii::$app->homeUrl,
          'label' => 'Home',
          'icon' => 'home',
      ],
      [
          'url' => 'http://localhost:8080/advanced/backend/web/index.php?r=tc/bills',
          'label' => 'Insert TC',
          'icon' => 'cloud',
      ],

      [
          'label' => 'Help',
          'icon' => 'question-sign',
          'items' => [
              ['label' => 'About', 'icon'=>'info-sign', 'url'=>'#'],
              ['label' => 'Contact', 'icon'=>'phone', 'url'=>'#'],
          ],
      ],
  ],

   ]);  
  ?>   
</div>
<div class="col-xs-7 col-sm-8 col-lg-9">
    <?= $content ?>
</div>

</div>

如果您需要一个宽容器，您可以通过这种方式更改课程container <div class="container-fluid">

为了减少SideNav的左侧间距，您可以为包含SideNav的div设置标签样式

 `<div class="col-xs-5 col-sm-4 col-lg-3" style="padding-left: 0px;">

`

相关问题
最新问题