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>个对象。你试过它们作为无序列表吗？ E.G：

<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"></a></li> <li class="skills"><a href="#pages"></a></li> <li class="skills"><a href="#rwd"> </a></li> <li class="skills"><a href="#front"></a></li> </ul>

请注意我没有测试过。你的代码还有<spanclass="count">，它应该有一个空格，而你的第三个字体真棒图像中有一些错误的代码。这可能会导致一些问题。

<强> EDIT2：

这是JSFiddle的

导航丸对我来说不起作用

1 个答案: