Bootstrap響應表不適用於Ember.js

Question

我是Bootstrap和Ember的新手。 我正在嘗試使用Ember.js生成響應表。 問題是，如果我將瀏覽器的大小更改為較小的大小，則在我的應用程序運行時，我不會在表中看到預期的水平滾動。 但是，如果我保存網頁並從磁盤打開它，則可以正常工作。 很奇怪:)我在這里粘貼頁面代碼以防萬一。 這是我用來學習的簡單示例。 提前致謝。 干杯！！ 貢扎洛

<!DOCTYPE html>
    <html>
    <head>

      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title></title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/style.css">

      <!-- Bootstrap -->
      <link href="libs/bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">


    </head>
    <body>
      <script type="text/x-handlebars">
        <h2>Registro de llamadas</h2>

        {{outlet}}
      </script>

      <script type="text/x-handlebars" id="index">

      <div class="container">
        <div class="table-responsive">
          <table class="table">
              <th>
                  Número
              </th>
              <th>
                  Nombre
              </th>
              <th>
                  Asunto
              </th>   
              {{#each item in model}}                  
              <tr>
                  <td>
                    {{#link-to 'editarLlamada' item}}Editar{{/link-to}}
                  </td>
                  <td> 
                      {{item.number}}
                  </td>              
                  <td> 
                      {{item.name}}
                  </td>
                  <td> 
                      {{item.subject}}
                  </td>              
              </tr>
              {{/each}}
          </table>
        </div>
      </div>

      <button {{action 'nuevallamada'}}>Nueva llamada</button>  

      </script>

      <script type="text/x-handlebars" id="nuevallamada">
             <div class='container'>
                  <p>Acá ingreso la nueva llamada</p>
               {{input type="text" value=number}}
               {{input type="text" value=name}}
               {{input type="text" value=subject}}

                 <button {{action 'guardarllamada'}}>Guardar</button>   
             </div>     
      </script>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="libs/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>


      <!-- <script src="js/libs/jquery-1.10.2.js"></script> -->
      <script src="js/libs/ember-template-compiler-1.10.0.js"></script>
      <script src="js/libs/ember-1.10.0.debug.js"></script>
      <script src="js/libs/ember-data.js"></script>


      <script src="js/app.js"></script>
      <script src="js/controllers/nuevallamada-controller.js"></script>
      <script src="js/routes/nuevallamada-route.js"></script>
      <script src="js/routes/editarllamada-route.js"></script>
      <script src="js/routes/index-route.js"></script>


    </body>
    </html>

Answer 1

根據引導程序，表結構應如下所示

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>header1</th>
        <th>header2</th>
      </tr>
    </thead>
    </tbody>
      <tr>
        <td>value 1</td>
        <td>value 2</td>
      </tr>
    </tbody>
  </table>
</div>

有關更多參考，請參見Bootstrap響應表

Bootstrap響應表不適用於Ember.js

問題描述

1 個解決方案

解決方案1
0 已采納 2015-09-04 09:53:48

Bootstrap響應表不適用於Ember.js

問題描述

1 個解決方案

解決方案1 0 已采納 2015-09-04 09:53:48

解決方案1
0 已采納 2015-09-04 09:53:48