如何正確使用引導網格系統佈局在我EmberJS應用

我不知道是否有人已經找到了一種方法來實現Bootstrap's Grid Layout系統在他們的灰燼JS應用程序。如何正確使用引導網格系統佈局在我EmberJS應用

我試過灰燼引導，但他們沒有網格系統包括在內。我也嘗試過其他NPM包，如自舉3格和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被正確導入，但是我仍然在試圖佈局項目時沒有得到一個網格佈局。

我錯過了什麼？

或者我應該用舊的方式手動構建一個靈活的佈局？

謝謝您的時間

來源

2017-05-11 railsRabbit

需要<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>

來包裝這些div小號也許定義不是在引導指南明確。你可能想看看the examples

電網具有共有12列。

來源

2017-05-11 19:33:39 ykaragol

我實際上已經把它原本包裝成一排，結果沒有什麼不同。不幸的是，這是行不通的。 – railsRabbit

所有人都在連續？網格共有12欄。 12 + 4 + 4 + 4 = 24。嘗試：6 + 2 + 2 + 2 – ykaragol

我最初是通過將所有列包裝在'row'類div中開始的，但沒有任何效果。 – railsRabbit

你需要記住在你的代碼中包含bootstrap！

通常當我開始灰燼CLI的項目，我做到以下幾點：（！你可以使用less代替）

安裝ember-cli-sass
安裝ember-bootstrap
重命名app.css到app.scss（薩斯擴展CSS ）
將行@import "ember-bootstrap/bootstrap";放在app.scss文件的頂部

我敢肯定有這樣做的其他方法，但我不知道他們的副手！

來源

2017-05-12 01:06:52

是的，我確定導入所有東西，並嘗試與SASS，但沒有任何工作不幸。我嘗試了大約6種不同的NPM軟件包，沒有任何功能可以滿足我的需求。但是，我只是直接從Bootstrap 4 alpha複製並粘貼'bootstrap-grid-min.css'，它現在正在工作。去圖老派的方法作品！ – railsRabbit

很高興聽到有人爲你解決問題，奇怪的是，沒有其他的工作，你用什麼版本的燼？ –

Ember 2.12.2。非常奇怪的是，我必須手動安裝CSS文件，然後添加'ember-bootstrap'。 – railsRabbit

在嘗試了多個用於Bootstrap安裝的NPM包後，我終於決定從Bootstrap 4下載源文件，添加原始文件bootstrap-grid-min.css。

轉到我的app.css，然後在我的次要自定義css上添加：@import url("bootstrap-grid.min.css");。我相信有更多的生產選擇，但這個選項的作品。

來源

2017-05-12 13:37:28 railsRabbit

如何正確使用引導網格系統佈局在我EmberJS應用

回答

相關問題