Question

我有一个带有NavBar菜单的Yii2应用程序，它看起来像这样：

echo Nav::widget([
                'options' => ['class' => 'navbar-nav '],
                'items' => [
                    ['label' => 'Home', 'url' => ['/site/index']],
                    ['label' => 'About', 'url' => ['/site/about']],
                    ['label' => 'Contact', 'url' => ['/site/contact']],
...

事实上，在我的代码中我有'encodeLabels' => false并且我在标签中有图像而不是文字，但这不相关。

这在小屏幕上完全符合预期 - 在小型和超小型设备上，链接消失，弹出“汉堡包”图标，如果点击它，您将获得所有链接的下拉列表。

我想要做的是始终在“汉堡包”菜单之外保留一些链接，而不是在下拉菜单中包含它们。例如，“主页”和“关于”链接需要保留在菜单中，即使屏幕变得太小也可以在每个级别看到，其他所有内容都可以自由进入下拉菜单。

我没有尝试将它们填入代码的NavBar::begin部分，但没有成功，此外，我认为应该有一种更简单的方法。有什么想法吗？

Answer 1

您应该使用普通html替换NavBar小部件来自定义引导程序navbar：

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header navbar-right pull-right">
      <ul class="nav pull-left">
        <li class="navbar-text pull-left">User Name</li>
        <li class="dropdown pull-right">
          <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle">
            <span class="glyphicon glyphicon-user"></span>
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li>
              <a href="/users/id" title="Profile">Profile</a>
            </li>
            <li>
              <a href="/logout" title="Logout">Logout </a>
            </li>
          </ul>
        </li>
      </ul>
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="visible-xs-block clearfix"></div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="/news">News</a></li>
        <li><a href="/Shop">Shop</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/locator">Locator</a></li>
        <li><a href="/extras">Extras</a></li>
      </ul>
    </div>
  </div>
</nav>

jsfiddle

Answer 2

在项目中设置选项允许为特定项目添加类或样式。例如style =＆＃39; display block;＆＃39;。这样您就可以避免使用普通的html代码管理所有导航栏

'items' => [
                [
                    'label' => 'Home', 
                    'url' => ['/site/index'],
                    'options' => ['class' => 'yourClass'
                                  'style' => 'display: block!important;'],
                ],
                ['label' => 'About', 'url' => ['/site/about']],
                ........................

Yii2 / Bootstrap NavBar菜单 - 使项目始终可见

2 个答案: