Question

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

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

我的错误是网格布局无法在我的项目中正确显示？

我还在<div class="row">中为列添加了以下HTML，但这些HTML根本不起作用。

{{#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导入正确，但是在尝试布局项目时我仍然没有得到网格布局。

我错过了什么？

或者我应该用手工制作灵活的布局？

感谢您的时间

Answer 1

需要将div与<div class="row">

包起来

<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列。

Answer 2

您需要记住在代码中包含bootstrap！

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

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

我确定还有其他方法可以做到这一点，但是我不知道他们是否已经知道了！

Answer 3

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

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

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

3 个答案: