繁体   English   中英

Bootstrap导航栏,类似于菜单折叠按钮的按钮

[英]Bootstrap navbar, button to look like the menu collapse button

我的菜单上有一个Bootstrap导航栏。 它仅用于移动设备,因此菜单始终折叠为标准的导航栏折叠按钮。 这是正确的; 我想要的是同一个导航栏中的后退按钮,看起来就像菜单折叠按钮一样,只是带有一个不同的glyphicon(雪佛龙左),向左对齐。 关于如何实现这一目标的任何想法?

这是菜单代码:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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 id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="meistro.html">Meistro</a></li>
            <li><a href="deelnemers.html">Deelnemers</a></li>
            <li><a href="jury.html">Jury</a></li>
            <li><a href="orkest.html">Het orkest</a></li>
            <li><a href="deharmonie.html">De Harmonie</a></li>
            <li><a class="stemmen" href="#">Stemmen</a></li>
            <li><a href="#" data-toggle="modal" data-target=".bs-nieuwsbrief">Nieuwsbrief</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

这是下面的工作示例: http : //seanconnelly.me/bootstrap-standard-button-with-left-mobile-back-button

在其他按钮上方添加一个新按钮:

<button type="button" class="navbar-toggle navbar-left"><span class="glyphicon glyphicon-chevron-left"></span></button>

请注意,我添加了一个名为navbar-left的新类。 您可以将其重命名为您想要的名称(例如后退按钮)。 我还使用了默认情况下与Bootstrap一起提供的glyphicon左V形字形,如果您使用的是FontAwesome或其他内容,则可以将其更改。

添加CSS

.navbar-left {
    float:left;
    margin-left:15px;
    padding:6px 10px;
}

应该是-从那里调整它以适合您的目的。 希望这可以帮助。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM