移动导航中的Twitter引导程序链接

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

Answer 2

折叠类内部的内容被折叠。如果你想要几个链接，并且它们足够短，在崩溃之外，但在酒吧内部，在品牌旁边，把它们放在品牌之后，但在崩溃div之前，并相应地设置样式。