【问题标题】:Bootstrap navbar, button to look like the menu collapse buttonBootstrap 导航栏,按钮看起来像菜单折叠按钮
【发布时间】:2015-01-11 17:09:24
【问题描述】:

我的网站有一个 Bootstrap 导航栏,用于我的菜单。它仅用于移动设备,因此菜单始终折叠成标准的导航栏折叠按钮。这是右对齐;我想要的是同一个导航栏中的后退按钮,它看起来就像菜单折叠按钮,只是有一个不同的字形图标(左对齐),左对齐。关于如何实现这一点的任何想法?

这是菜单代码:

<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>

【问题讨论】:

    标签: html twitter-bootstrap


    【解决方案1】:

    下面是一个工作示例: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 left chevron,如果您使用的是 FontAwesome 或其他东西,您可以将其更改。

    添加 CSS

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

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

    【讨论】:

    • 编辑 - 你也可以只使用 .pull-left 而不是写那个 CSS
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-12-13
    • 1970-01-01
    • 1970-01-01
    • 2017-01-21
    • 1970-01-01
    • 2016-05-06
    相关资源
    最近更新 更多