Question

有些测试显示，移动设备上可折叠菜单的“汉堡包”按钮对用户来说是个谜，我想在移动视图中看到我的Bootstrap菜单按钮旁边添加“菜单”一词。

如需进一步阅读，请查看此文章：“汉堡包对您不利”：http://mor10.com/hamburger-bad/

这是基本的Bootstrap代码：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <!-- Represents navbar collapsed menu on smaller screens -->
  <span class="sr-only">Toggle navigation</span>
    <!-- 3 horizontal lines on small screen nav button -->
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

所以，我想在手机上的图标旁边添加“MENU”这个词。我制作了一个我正在谈论的模型，但是我没有足够的声誉来发布它。

请在此处查看：https://imgur.com/M7hGS7F

这是一个模型，实际的Bootstrap页面不包含MENU文本，否则我只看源。

如果您可以提供有关如何包含的信息，则（A）只需在按钮旁边显示文字。（B）作为按钮的一部分，所以可以点击它是很棒的。在此先感谢您对此解决方案的帮助！

Answer 1

另一个简单的css解决方案：

.navbar-toggle:before {
    content:"Menu";
    left:-50px;
    top:4px;
    position:absolute;
    width:50px;
}

Answer 2

我想最好使用fontawesome。

只需包含对fontawesome的引用（请参阅http://fortawesome.github.io/Font-Awesome/get-started/），然后使用条形图标（http://fortawesome.github.io/Font-Awesome/icon/bars/）

所以你的代码看起来很......那样：

<head>
   [...]
   <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
   [...]
</head>
<body>

[...]

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <!-- Represents navbar collapsed menu on smaller screens -->
    <span class="sr-only">Toggle navigation</span>
    <i class="fa fa-bars" aria-hidden="true"></i> Menu
</button>

如果条形图标应该更大，只需将fa-lg或可在http://fortawesome.github.io/Font-Awesome/examples/找到的任何其他类添加到图标

Answer 3

HTML

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="button-label">Menu</span>
    <div class="button-bars">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>
</button>

CSS

.navbar-toggle .button-label {
    display: inline-block;
    float: left;
    font-weight: bold;
    line-height: 14px;
    padding-right: 10px;
}
.button-bars {
    display: inline-block;
    float: left;
}

Answer 4

我遇到了同样的问题，但并不想添加fontawesome。

这是我的解决方案（HTML和LESS）：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="button-label">Meny</span>
    <div class="button-hamburger">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
    </div>
</button>

LESS：

button {

    .button-label {
        display: table-cell;
        vertical-align: middle;
        font-weight: 700;
        padding-right: 3px;
    }

    .button-hamburger {
        display: table-cell;
        padding: 8px;
        border: 1px solid #333;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;

        .icon-bar {
            background: #333;
        }
    }
}
.navbar-toggle {
    border: none;
    padding: 0;
}

警告：我只在最新的Chrome和IE 11中对此进行了测试。我没有设置任何其他内容。

在Mobile-View上向Bootstrap Navbar切换按钮添加文本提示

4 个答案: