Question

如何在bootstrap移动菜单按钮中添加文本？

    <div class="sidebar-nav">
        <div class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                    <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 class="navbar-collapse sidebar-navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li class="nav_bar_title"></li>

   <li class="page_item"></li>
                  </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>

示例，我想要实现的目标：

Answer 1

您可以为文本添加列表项，其余为菜单项：

handleCaptchaExpiry

并使用某个类来设置该元素的样式或使用css：first-child selector。

希望有所帮助。

Answer 2

这样的事情：

Bootply ：https://www.bootply.com/JH4FMuvYMe

<强> HTML

<div class="sidebar-nav">
    <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                <span class="text">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                        </div>
        <div class="navbar-collapse sidebar-navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
            <ul class="nav navbar-nav">
                <li class="nav_bar_title"></li>

<强>的CSS

span.text {
    float: left;
    margin-right: 30px;
}

.navbar-toggle .icon-bar{
      margin-left: auto;
    }

Answer 3

你可以试试这个：

<div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">          
            <button  type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span style="display:inline-block; margin:2px;">menu text</span>
              <span style="display:inline-block;">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              </span>
            </button>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="../index.html">Home</a></li>
              <li><a href="../about.html">About</a></li>
              <li><a href="../glass-services.html">Services</a></li>
              <li><a href="../contact.html">Contact</a></li>
            </ul>

          </div>
        </div>
</div>

在bootstrap移动菜单按钮内添加文本

3 个答案: