Javascript 引导网站中的垂直选项卡

我试图在我的引导网站中实现垂直标签。 下面是代码：

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-5">
      <div class="tabs-left">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
          <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
          <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
          <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
          <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
          <li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="a">
            <h3>Who do you Love?</h3>
            <ul class="list-group pull-left">
              <li class="list-group-item">
                <h4>Jen &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
              </li>
              <li class="list-group-item">
                <h4>Dezi &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
              </li>
              <li class="list-group-item">
                <h4>Eli &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
              </li>
              <li class="list-group-item">
                <h4>Mojo &nbsp; &nbsp;<span class="badge pull-right">83%</span></h4>
              </li>
              <li class="list-group-item">
                <h4>Myself &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
              </li>
            </ul>
          </div>
          <div class="tab-pane" id="b">
            <h3>What's your Favorite?</h3>
            <ul class="list-group pull-left">
              <li class="list-group-item">
                <h4>Crystals &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
              </li>
              <li class="list-group-item">
                <h4>Healing &nbsp; &nbsp;<span class="badge pull-right">90%</span></h4>
              </li>
              <li class="list-group-item">
                <h4>Exploring &nbsp; &nbsp;<span class="badge pull-right">78%</span></h4>
              </li>
              <li class="list-group-item">
                <h4>QiGong &nbsp; &nbsp;<span class="badge pull-right">83%</span></h4>
              </li>
              <li class="list-group-item">
                <h4>Myself &nbsp; &nbsp;<span class="badge pull-right">100%</span>
                </h4></li>
            </ul>
          </div>
          <div class="tab-pane" id="c">CCCCThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
          <div class="tab-pane" id="d">DDDDDSecondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</div>
          <div class="tab-pane" id="e">EEEEEThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
          <div class="tab-pane" id="f">FFFFFFThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
        </div><!-- /tab-content -->
      </div><!-- /tabbable -->
    </div><!-- /col -->
  </div><!-- /row -->
</div><!-- /container -->  

body {
  background-color: #ddd;
}

h3 {
  margin-top: 0;
}

.badge {
  background-color: #777;
}

.tabs-left { margin-top: 3rem; }

.nav-tabs {
  float: left;
  border-bottom: 0;


  li {
    float: none;
    margin: 0;

    a {
      margin-right: 0;
      border: 0;
      background-color: #333;

      &:hover {
        background-color: #444;
      }
    }
  }

  .glyphicon {
    color: #fff;
  }

  .active .glyphicon {
    color: #333;
  }
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  border:0;
}

.tab-content {
  margin-left: 45px;

  .tab-pane {
    display: none;
    background-color: #fff;
    padding: 1.6rem;
    overflow-y: auto;
  }

  .active { display: block; }
}

.list-group {
  width: 100%;

  .list-group-item {
    height: 50px;

    h4, span {
      line-height: 11px;
    }
  }
}  

Javascript

：

var tabsFn = (function() {

  function init() {
    setHeight();
  }

  function setHeight() {
    var $tabPane = $('.tab-pane'),
        tabsHeight = $('.nav-tabs').height();

    $tabPane.css({
      height: tabsHeight
    });
  }

  $(init);
})();  

其实现如下所示
但当我在我的网站上尝试时，我得到了一个奇怪的结果：

---

为什么会这样

也许你可以使用这个作为第二个选项…基于bootstrap-@LuisP.A.：太好了，我将尝试使用这个选项，为你的容器添加一个id，并为你所有的css添加前缀，以便它覆盖你的其他本地样式！