Ember.js模板布局

Question

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

我一直在谷歌搜索该怎么做，但只设法使其仍然浮动在菜单栏下方。 有人可以告诉我该怎么做吗？ 最好不必使用一些复杂的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

如果使用引导程序，则可以使用列类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