Question

我需要我的导航标签（在我拥有它的位置下拉）在JS Fiddle中正确渲染（它必须在JS Fiddle中工作） - 我已经让它工作了＆amp;通过在文本编辑器中组合组件来正确布局，但我需要它在JS Fiddle中工作并查看它在引导程序站点上的作用（横向布置，而不是垂直堆叠在另一个上，就像现在一样）。这是我第一次在JS Fiddle中使用Bootstrap，我从来没有在纯HTML和CSS中遇到问题，但我需要它在这种情况下工作。我不确定为什么它不能在这里（垂直）和Nav Tabs正确渲染。此外，出于某种原因，我的下拉菜单在这个小提琴中没有正常工作（虽然我认为它与我的文本编辑器完全相同，但是它工作正常，但我可能丢失了切割和粘贴的东西）。无论如何，我还没有开始使用CSS＆amp;我一直试图让这个工作好几天而且非常令人沮丧 - 我希望有更多经验的Bootstrap可以给我一个关于我在做什么的线索这里错了 - 任何帮助或建议将不胜感激。这是指向它的链接： 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正确回答：

https://stackoverflow.com/a/34986434/5666784

（我的Bootstrap等人的链接包含在html＆amp;而不是JS 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中的Nav-Tabs在JS Fiddle中无法正确呈现

2 个答案: