Bootstrap 中的汉堡按钮答案

【问题标题】：Hamburger Button in BootstrapBootstrap 中的汉堡按钮
【发布时间】：2015-07-07 02:08:05
【问题描述】：

我想修复导航栏上的经典引导样式汉堡按钮，例如当屏幕尺寸变得足够小时时显示为切换按钮的按钮。

无论如何，我怎样才能按原样显示按钮，而不必通过 navbar-toggle 类实现它？

编辑：这是我的按钮：

<div>
    <div class="center">
        <button type="button" class="btn">☰</button>
    </div>
</div>   



body {
background: #222;

}

.center {
    width: 100px;
    margin: 50px auto;
}

.btn {
  background-color: #222;
  border: 1px solid #3A3A3A;
  color: #D3D3D3;
  width: 42px;
  margin-left: 42px;
  font-size: 23px;
  height: 34px;
  transition: color 0.45s;
  transition: border 0.45s;
}

button.btn:hover {
  color: #2978E0;
  border: 1px solid #61A5FF;
}

https://jsfiddle.net/rstty1ye/

在 tutsplus.com 上提到了使用 UTF-8 字符这不是我最初的发现或想法。

【问题讨论】：

标签： css twitter-bootstrap user-interface

【解决方案1】：

没关系，我想通了。

创建了一个自定义按钮并使用 UTF-8 字符：Trigram for Heaven 用于条。

【讨论】：

你能在答案中分享你的解决方案吗？
完成。这是一个非常普通的按钮，只是没有使用通常的方法创建 3 个矩形并给出边框半径，这里我们使用了一个看起来相似的 UTF-8 字符。