javascript - Ember.js 模板布局

Question

我是 ember 开发的新手，正在尝试制作我的第一个应用程序。在我的应用程序模板中，我有一个菜单栏，下面有一个 {outlet} 标签，用于接受其他模板。我的问题是菜单栏位于页面左侧，我希望 {outlet} 内容位于右侧旁边，而不是下方。

我一直在谷歌搜索如何做到这一点，但只设法让它正确 float ，仍在菜单栏下方。有人可以告诉我该怎么做吗？最好不必使用一些复杂的 css？

<script type="text/x-handlebars" id="application">
    <div class="main">
    <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
      <li class="active">
      <a href="#"<span class="glyphicon glyphicon-home"></span>  Dashboard</a>
      </li>
      <li>
      <a href="#"<span class="glyphicon glyphicon-user"></span>  Agents</a>
      </li>
      <li>
      <a href="#"<span class="glyphicon glyphicon-list"></span>  Queues</a>
      </li>
      <li>
      <a href="#"<span class="glyphicon glyphicon-signal"></span>  Analytics</a>
      </li>
      <li>
      <a href="#"<span class="glyphicon glyphicon-wrench"></span>  Settings</a>
      </li>
      <li>
      <a href="#"<span class="glyphicon glyphicon-arrow-right"></span>  Logout</a>
      </li>
    </ul>
    </br>

      {{outlet}}
    </div>
  </script>

Answer 1

如果您使用的是 Bootstrap ，则可以使用列类 col-md-x

<div class="container">
    <div class="col-md-2">
        your navs
    </div>
    <div class="col-md-10">
        {{outlet}}
    </div>
</div>

看看那个样本 http://emberjs.jsbin.com/EJifOyaX/1 在代码中 http://emberjs.jsbin.com/EJifOyaX/1/edit