jquery - 移动导航中的 Twitter Bootstrap 链接

Question

是否可以在移动版导航栏中显示除品牌和切换按钮之外的一些链接？我的导航看起来像这样:

<nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#" style="cursor:default;"><%= __('chart.from') %></a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input id="date_from" type="text" class="dtp form-control" data-date-format="hh:ii dd.mm.yyyy">
            </div>
          </form>
          <ul class="nav navbar-nav">
            <li><a href="#" style="cursor:default;"><%= __('chart.to') %></a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input id="date_to" type="text" class="dtp form-control" data-date-format="hh:ii dd.mm.yyyy">
            </div>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a id="chart_btn" href="#chart" data-toggle="tab"><%= __('chart.graph') %></a></li>
            <li><a id="table_btn" href="#table" data-toggle="tab"><%= __('chart.table') %></a></li>
          </ul>
        </div>
      </nav>

我希望最后两个元素在移动版本中也可见。

Answer 1

您可以在 nav-header 中使用 navbar-link 类，这样链接就不会折叠到移动菜单中。

<nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header pull-right">
          <p class="navbar-text">
            <a id="chart_btn" href="#chart" data-toggle="tab" class="navbar-link">graph</a>
            <a id="table_btn" href="#table" data-toggle="tab" class="navbar-link">table</a> 
            &nbsp;
          </p>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#" style="cursor:default;">from</a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input id="date_from" type="text" class="dtp form-control" data-date-format="hh:ii dd.mm.yyyy">
            </div>
          </form>
          <ul class="nav navbar-nav">
            <li><a href="#" style="cursor:default;">to</a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input id="date_to" type="text" class="dtp form-control" data-date-format="hh:ii dd.mm.yyyy">
            </div>
          </form>
        </div>
</nav>

Bootply