Bootstrap table 的样式在与 Ember.js 一起使用时搞砸了

Question

我和 bootstrap 一起工作。当我在普通 HTML 中创建 table 时，bootstrap 的 table 样式按预期应用。

但是，当我将 same HTML 插入 Ember.js 模板时，bootstrap 的 table 样式似乎不适用（例如 table 边框、填充和条纹不存在）。 Fiddle: http://jsfiddle.net/5evymbou/

普通 HTML:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <table id="search-results" class="table table-striped">
                <tr>
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                </tr>
                <tr>
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                </tr>
            </table>
        </div>
    </div>
</div>

相同的 HTML - 但在 Ember 模板中使用：

<script type="text/x-handlebars" data-template-name="application">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <table id="search-results" class="table table-striped">
                    <tr>
                        <td>a</td>
                        <td>b</td>
                        <td>c</td>
                    </tr>
                    <tr>
                        <td>a</td>
                        <td>b</td>
                        <td>c</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</script>

<div id="root"></div>

<script>
    App = Em.Application.create({
        rootElement: '#root'
    })
</script>

Answer 1

这是因为 Bootsrap CSS 依赖于 tbody、thead 等的存在，如果您不要包括他们。您可以通过在浏览器开发工具中检查 table 来自行检查。

因为你的ember table是在HTML解析后添加到DOM中的，所以浏览器不会自动创建这些元素

Bootstrap的例子CSS:

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

您可以通过向模板添加 tbody 元素轻松修复代码：

<script type="text/x-handlebars" data-template-name="application">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <table id="search-results" class="table table-striped">
                    <tbody>
                        <tr>
                            <td>a</td>
                            <td>b</td>
                            <td>c</td>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>b</td>
                            <td>c</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</script>

Updated Fiddle

Bootstrap table 的样式在与 Ember.js 一起使用时搞砸了

Bootstrap table's styles messed up when used with Ember.js

html

css

html-table

twitter-bootstrap

ember.js