有没有办法在bootstrap中添加导航栏切换按钮作为屏幕上的固定按钮？

Question

我想添加图片中给出的导航栏切换按钮

在我的HTML页面中。

但是，bootstrap为我们提供了创建按钮的选项

我不想要任何普通按钮，特别想要第一张图片。 有没有办法做到这一点？

Answer 1

最终答案分为两部分： 已经处理的初始代码。并且使用了最终结果。 两者都可用于创建一个看起来像＆＃34; navbar-toggle＆＃34;的菜单图标。按钮。但总是固定在屏幕上！

初步审判代码

• 在Bootstrap中使用<span>。
• 位于右上角。
• CSS定位（可以改变颜色）和响应。

＆＃13;

＆＃13;

.ham-menu, .ham-menu span {
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
  cursor: pointer;
}

.ham-menu {border: 2px solid #666; width: 32px; padding: 1px; border-radius: 3px; position: absolute; right: 5px; top: 5px; }
.ham-menu .line {border: 3px solid #666; line-height: 0; font-size: 0; display: block; margin: 2px;}
.ham-menu .line.small {border-width: 2px;}

.ham-menu:hover {border-color: #99f;}
.ham-menu:hover span {border-color: #ccf;}

＆＃13;

<div class="ham-menu">
  <span class="line"></span>
  <span class="line small"></span>
  <span class="line"></span>
</div>
<p>Hover and See</p>

＆＃13;

＆＃13;

＆＃13;

当屏幕尺寸较小时（两个切换按钮都可见

）

当屏幕尺寸较大时（左侧切换图标仍然存在）