如何在我的 EmberJS 应用程序中正确使用引导网格系统布局答案

【问题标题】：How do I properly use the Bootstrap Grid System Layout in my EmberJS App如何在我的 EmberJS 应用程序中正确使用引导网格系统布局
【发布时间】：2017-05-11 16:04:47
【问题描述】：

我想知道是否有人找到了在他们的 Ember JS 应用中实现 Bootstrap's Grid Layout 系统的方法。

我尝试过 Ember Bootstrap，但他们没有包含网格系统。我还尝试了其他 NPM 包，例如 Bootstrap 3 Grid 和 Bootstrap 4。

网格布局在我的项目中无法正确显示，我做错了什么？

我还将以下 HTML 包装在 <div class="row"> 中用于列，但这也根本不起作用。

{{#each model as |phone|}}
  <div class="phone">
    <div class="col-md-12">
      <div class="phone-header">
        {{phone.make}} {{phone.model}}
          <small>{{phone.trim}}</small>
      </div>
    </div>
      <div class="col-md-4">
        Option 1
      </div>
      <div class="col-md-4">
        Option 2
      </div>
      <div class="col-md-4">
        Option 3
      </div>
    </div>
{{/each}}

明确修复：

 {{#each model as |phone|}}
      <div class="phone">
        <div class="col-md-12">
          <div class="phone-header">
            {{phone.make}} {{phone.model}}
              <small>{{phone.trim}}</small>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
             Some Item Column
          </div>
          <div class="col-sm-4">
             Some Item Column
          </div>
          <div class="col-sm-4">
             Some Item Column
          </div>
         {{twbs-clearfix columnCount=3 index=index visible-sm=true visible-md=true visible-lg=true}}
    </div>
  </div>
{{/each}}

我确保我的 CSS 和 JS 已正确导入，但是在尝试布局项目时我仍然没有得到网格布局。

我错过了什么？

或者我应该以旧的方式手动构建一个灵活的布局？

感谢您的宝贵时间

【问题讨论】：

标签： twitter-bootstrap ember.js

【解决方案1】：

需要用<div class="row">包裹那些divs

<div class="phone">
  <div class="row"><!-- add this to specify the row -->
    <div class="col-md-6">
      <div class="phone-header">
        {{phone.make}} {{phone.model}}
          <small>{{phone.trim}}</small>
      </div>
    </div>
    <div class="col-md-2">
      Option 1
    </div>
    <div class="col-md-2">
      Option 2
    </div>
    <div class="col-md-2">
      Option 3
    </div>
  </div>
</div>

引导指南中的定义可能不清楚。你可能想看看the examples

网格共有 12 列。

【讨论】：

我实际上把它最初包装成一排，结果没有什么不同。不幸的是，这不起作用。
全部排成一排？网格共有 12 列。 12+4+4+4=24。试试：6+2+2+2
我最初将所有列包装在 row 类 div 中，但没有任何效果。
在常规静态 HTML 项目中工作，而不是在 EmberJS 应用程序中
好的，我将在一行中更新我的答案。总共 12 = 6+2+2+2

【解决方案2】：

您需要记住在代码中包含引导程序！

通常，当我启动 ember CLI 项目时，我会执行以下操作：

安装ember-cli-sass（你可以改用less！）
安装ember-bootstrap
将 app.css 重命名为 app.scss（css 的 Sass 扩展）
将@import "ember-bootstrap/bootstrap"; 行放在app.scss 文件的顶部

我确信还有其他方法可以做到这一点，但是我不知道它们！

【讨论】：

是的，我确保导入所有内容并尝试使用 SASS，但不幸的是没有任何效果。我尝试了大约 6 个不同的 NPM 包，但没有任何东西可以满足我的需要。但是，我只是直接从 Bootstrap 4 alpha 复制并粘贴 bootstrap-grid-min.css，它现在可以工作了。想想老派的方法行得通！
很高兴听到您成功了，但奇怪的是没有其他方法有效，您使用的是什么版本的 ember？
Ember 2.12.2。确实很奇怪，我必须手动安装 CSS 文件，然后添加 ember-bootstrap。

【解决方案3】：

在尝试了多个 NPM 包为 Ember 安装 Bootstrap 之后，我终于决定从 Bootstrap 4 下载源文件，添加原始的 bootstrap-grid-min.css。

转到我的app.css，然后在我的辅助自定义 CSS 上方添加：@import url("bootstrap-grid.min.css");。我敢肯定还有更高效的选项，但这个选项有效。

【讨论】：