Bootply

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

您可以使用navbar-link内的nav-header课程，以便链接不会崩溃到移动菜单中。

<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之前并相应地设计它们。

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

2 个答案:

Bootply