html - 无法在 Bootstrap 上创建自定义按钮

Question

我正在尝试创建一个看起来像导航栏按钮的按钮，该按钮会在单击时折叠和展开某个 div。我正在让事件处理正常工作，但按钮不会变成我想要的外观，类似于 this。 .我用了三个 <span class="icon-bar"></span>元素，但它不起作用。看看 codepen .是跨度元素icon-bar上课了吗？如何实现我想要的？

编辑:很难看到按钮，但它就在那里。它是空的，这就是问题所在。

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css">
<div class="container-fluid">
   <div class="row dish-item-view">
      <button type="button" data-toggle="collapse" data-target="#sidebar">
      <span class="sr-only">Toggle Dinner Overview</span>
      <span class="icon-bar"></span>
      <span class="icor-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 sidebar in" id="sidebar">
         <h4>To collapse</h4>
      </div>
   </div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

Answer 1

您遇到的问题是 Bootstrap 样式都依赖于具有某些类的父元素。

我已经创建了这个 fiddle演示如何成功获取汉堡菜单。如果您使用内置样式的 Bootstrap ，这将非常简单。只需像这样创建一个导航栏:

<div class="navbar custom-hamburger-menu" role="navigation">
    <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#customHamburgerMenuContent">
             <span class="sr-only">Screen reader title</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>
    </div>

    <div id="customHamburgerMenuContent" class="navbar-collapse collapse">
        Collapsible content
    </div>
</div>

然后您所要做的就是像这样设置 .icon-bar 的样式:

.custom-hamburger-menu .navbar-toggle .icon-bar{ 
    background-color: black;
}