Twitter Bootstrap 中的导航选项卡无法在 JS Fiddle 中正确呈现

Question

我需要我的导航标签（在我拥有它的地方有下拉菜单）在 JS Fiddle 中正确呈现（它必须在 JS Fiddle 中工作）- 我已经通过在文本编辑器中组合组件使其正常工作和布局，但我需要它在 JS Fiddle 中工作并查看它在 bootstrap 网站上的表现（横向布局，而不是像现在一样垂直堆叠在另一个上）。这是我第一次在 JS Fiddle 中使用 Bootstrap，我在普通 HTML w/CSS 中从来没有遇到过问题，但我需要它在这种情况下工作。我不太确定为什么它不能在这里（垂直）和作为导航选项卡正确呈现。此外，出于某种原因，我的下拉菜单在此 Fiddle 中无法正常工作（尽管我认为它与在我的文本编辑器中工作正常但我可能丢失了一些剪切和粘贴的内容完全相同）。无论如何，我什至还没有开始 CSS & 我已经尝试让它工作好几天了，这太令人沮丧了-我希望在 Bootstrap 方面更有经验的人可以给我关于我在这里做错了什么的线索 - 任何帮助或建议将不胜感激。这是一个 link ： https://jsfiddle.net/Tamara6666/4z1nwfbc/ 而且，这是我的 html 代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<body>
<ul id="myTab" class="nav nav-tabs">
  <li><a href="#"><icon class="fa fa-home"></icon></a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Community</a>
    <ul class="dropdown-menu">
    <li><a href="#">Member Activity</a></li>
    <li><a href="#">Member Forum</a></li>
    <li><a href="#">Member Lists</a></li>
    <li><a href="#">Member Groups</a></li>
    </ul>
  </li>
  <li role="presentation"><a href="#">Pet Help</a></li>
  <li role="presentation"><a href="#">Pets for Sale</a></li>
  <li role="presentation"><a href="#">Pet Services</a></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>

如有任何帮助，我们将不胜感激。非常感谢 - 我觉得无法让它发挥作用有点愚蠢。谢谢！

Answer 1

这是因为外部文件链接已添加到您的 html 代码中。应该在侧边栏外部链接中。

Here is your updated JSFiddle

<body>
  <ul id="myTab" class="nav nav-tabs">
    <li>
      <a href="#">
        <icon class="fa fa-home"></icon>
      </a>
    </li>
    <li role="presentation" class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Community</a>
      <ul class="dropdown-menu">
        <li><a href="#">Member Activity</a></li>
        <li><a href="#">Member Forum</a></li>
        <li><a href="#">Member Lists</a></li>
        <li><a href="#">Member Groups</a></li>
      </ul>
    </li>
    <li role="presentation"><a href="#">Pet Help</a></li>
    <li role="presentation"><a href="#">Pets for Sale</a></li>
    <li role="presentation"><a href="#">Pet Services</a></li>
  </ul>
</body>

Answer 2

@Ahs N 正确回答：

（我的 link 到 Bootstrap 等人包含在 html 中，而不是在 JS Fiddle 的外部资源面板中） link 到固定 fiddle:

https://jsfiddle.net/Tamara6666/2cup6cno/

[these were not in the external resources panel & instead in my html causing it to not render correctly in JS Fiddle]: 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

感谢您的及时帮助@Ahs N - 非常感谢！

Twitter Bootstrap 中的导航选项卡无法在 JS Fiddle 中正确呈现

Nav-Tabs in Twitter Bootstrap won't render correctly in JS Fiddle

html

jsfiddle

twitter-bootstrap