HTML5在jsFiddle中工作时表现得很奇怪

Question

标题不是很好。使用以下代码，我希望“搜索”和“注销”这两个元素与徽标位于同一行，但是可以正确对齐。

<div class="wrapper">
  <div class="ui block top attached header" style="margin-bottom: 0;">
    <div class="ui grid">
      <div class="nb_header left aligned two column row">
        <div class="three wide column">
          (Logo)
        </div>
        <div class="thirteen wide right aligned column">
          <div class="">
            <div class="ui action input">
              <input type="text" placeholder="Search..."/>
              <button class="ui button">Search</button>

            </div>
            <div class="ui action red button">Logout</div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <div class="ui attached segment">
              ...content...

  </div>
</div>

虽然我正在为这篇文章输入这个完全相同的代码到jsFiddle中，但我发现它的行为应该如此。这是小提琴：http://jsfiddle.net/kr37euu1/4/

以下是我在浏览器中的截图：

为了进行比较，我将发布jsFiddle版本的另一个屏幕截图：

为什么表现不同？

Answer 1

我找到了答案。在对小提琴和我的本地代码进行了几处更改后，我发现唯一剩下的区别是semantic-ui的CSS和JS。使用CDN版本1.12.3似乎有效 - 即使我的本地副本也是1.12.3。

从CDN下载minifed版本并将它们放在我的本地实例中似乎解决了这个问题 - 为什么呢。

谢谢大家的帮助。