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

根据bootstrap，表结构应如下所示

<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 Responsive Table

Bootstrap响应表不适用于Ember.js

1 个答案: