jquery - nav-pills 对我不起作用

Question

我已经尝试使用 nav-pills(来自 bootstrap 3.2.0)，但它似乎对我不起作用。这是我的 HTML 代码:

<div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="skills-box">

            <div class="nav nav-pills" role="tablist">
              <div class="skills active">
             <a data-toggle="pill" href="#code" role="pill"><spanclass="count"><i class="fa fa-code fa-3x"></i></span></a>
             </div>

              <div class="skills">
              <a data-toggle="pill" href="#pages" role="pill"><span class="count"><i class="fa fa-desktop fa-3x"></i></span></a>
              </div>


              <div class="skills">
              <a data-toggle="pill" href="#rwd" role="pill"><span class="count"><i class="fa fa-laptop fa-3x"> </i><i class="fa <fa-> </fa->tablet fa-2x"></i></span></a>
              </div>

              <div class="skills">
              <a data-toggle="pill" href="#front" role="pill"><span class="count"><i class="fa fa-cogs fa-3x"></i></span></a>
              </div>
            </div>

              <div class="tab-content">
              <div class="tab-pane active" id="code"><h3>Kodowanie HTML5/LESS</h3><p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.</p></div>

              <div class="tab-pane" id="pages"><h3>Strony internetowe</h3><p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.</p></div>

              <div class="tab-pane" id="rwd"><h3>Responsive & Mobile first design</h3><p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.</p></div>

              <div class="tab-pane" id="front"><h3>Kodowanie HTML5/LESS</h3><p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.</p></div>
              </div>

        </div>
      </div>
    </div>

有人可以检查一下并给我一些提示吗？

BR,巴泰克

Answer 1

docs将药丸显示为 <ul>对象。您是否尝试过将它们作为无序列表？例如:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

编辑:

在你的情况下它会是这样的......

<ul class="nav nav-pills" role="tablist">
    <li class="skills active"><a href="#code"><span class="count"><i class="fa fa-code fa-3x"></i></span></a></li>
    <li class="skills"><a href="#pages"><span class="count"><i class="fa fa-desktop fa-3x"></i></span></a></li>
    <li class="skills"><a href="#rwd"><span class="count"><i class="fa fa-laptop fa-3x"> </i><i class="fa-tablet fa-2x"></i></span></a></li>
    <li class="skills"><a href="#front"><span class="count"><i class="fa fa-cogs fa-3x"></i></span></a></li>
</ul>

请注意我还没有测试过它。您的代码也有 <spanclass="count">它应该有一个空格，并且您的第三个 Font Awesome 图像中有一些错误代码。这可能会导致一些问题。

编辑 2:

这是一个 JSFiddle它的