Question

我正在尝试基于Admin LTE构建管理面板，它使用bootstrap 4.0。我在NavBar yii2布局中使用main.php，如下所示：

 <?php
    NavBar::begin([
        'brandLabel' => Yii::$app->name,
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'main-header navbar navbar-expand bg-white navbar-light border-bottom',
        ],
    ]);
    echo Nav::widget([
        'options' => ['class' => 'navbar-nav'],
        'items' => [
            ['label' => '', 'url' => ['/site/index'],'options'=>['class'=>'nav-item'], 'template' => '<a href="#" class="nav-link" data-widget="pushmenu" target="_blank"><i class="fa fa-bars"></i></a>'],
            ['label' => 'About', 'url' => ['/site/about'],'options'=>['class'=>'nav-item d-none d-sm-inline-block']],
            ['label' => 'Contact', 'url' => ['/site/contact'],'options'=>['class'=>'nav-item d-none d-sm-inline-block']],
        ],
    ]);
    NavBar::end();
    ?>

预期输出

<nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="index3.html" class="nav-link">Home</a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>
</nav>

但我最终在html中得到了这样的东西：

<nav id="w0" class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
   <div class="container">
      <div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-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="/index.php">My Application</a>
      </div>
      <div id="w0-collapse" class="collapse navbar-collapse">
         <ul id="w1" class="navbar-nav nav">
            <li class="nav-item active"><a class="nav-link" href="/index.php?r=site%2Findex" data-widget="pushmenu">Home</a></li>
            <li class="nav-item d-none d-sm-inline-block"><a href="/index.php?r=site%2Fabout">About</a></li>
            <li class="nav-item d-none d-sm-inline-block"><a href="/index.php?r=site%2Fcontact">Contact</a></li>
         </ul>
      </div>
   </div>
</nav>

如何摆脱这个<div class="container和div .navbar-header？

Answer 1

您需要使用$renderInnerContainer NavBar查看Docs

将您的代码更改为

 <?php
    NavBar::begin([
        'brandLabel' => Yii::$app->name,
        'brandUrl' => Yii::$app->homeUrl,
        'renderInnerContainer'=>false,
        'options' => [
            'class' => 'main-header navbar navbar-expand bg-white navbar-light border-bottom',
        ],
    ]);
    echo Nav::widget([
        'options' => ['class' => 'navbar-nav'],
        'items' => [
            ['label' => '', 'url' => ['/site/index'],'options'=>['class'=>'nav-item'], 'template' => '<a href="#" class="nav-link" data-widget="pushmenu" target="_blank"><i class="fa fa-bars"></i></a>'],
            ['label' => 'About', 'url' => ['/site/about'],'options'=>['class'=>'nav-item d-none d-sm-inline-block']],
            ['label' => 'Contact', 'url' => ['/site/contact'],'options'=>['class'=>'nav-item d-none d-sm-inline-block']],
        ],
    ]);
    NavBar::end();
    ?>

您无法关闭navbar-header容器，因为它是init()行的yii\bootstrap\NavBar函数中的硬编码123您可以扩展并覆盖NavBar如果你想删除它。或者您也可以使用css类覆盖所有属性，如果它调整宽度的问题

Yii2从NavBar中删除div标签

1 个答案: