Asp.Net 中的 Bootstrap 3 数据表样式以某种方式被覆盖答案

【问题标题】：Bootstrap 3 Datatable Styling in Asp.Net getting overwritten somehowAsp.Net 中的 Bootstrap 3 数据表样式以某种方式被覆盖
【发布时间】：2017-12-01 03:52:44
【问题描述】：

只是试图让 Bootstrap 3 Theme for Datatables (https://datatables.net/examples/styling/bootstrap.html) 在新的 Asp.Net MVC 应用程序上运行，我认为样式正在以某种方式被覆盖。

据我了解，我需要在我的 Bundle Config 中包含 bootstrap.min.css 文件和 dataTable.bootstrap.min.css 文件，

public class BundleConfig
{
    // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.10.2.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js",
                  "~/Scripts/DataTables/jquery.dataTables.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css",
                  "~/Content/DataTables/css/jquery.dataTables.css",
                  "~/Content/DataTables/css/dataTables.bootstrap.css"));
    }
}

我已经阅读了各种内容，我尝试从我的 css 包中删除“~/Content/DataTables/css/jquery.dataTables.css”，因为这似乎也有冲突。不过，这对我也没有任何作用。数据表初始化工作正常，我明白了，

您可以告诉它尝试应用与图标冲突的引导样式。但我不知道为什么样式没有自动应用。

这是我的桌子设置，

<table class="table" id="anthony-transactions">
<thead>
    <tr>
        <th></th>
        <th>Description</th>
        <th>Amount</th>
        <th>Type</th>
        <th>Date</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <div class="btn btn-default">
                Edit
            </div>
        </td>
        <td>May 2017 | Wellness Summit</td>
        <td>
            <span class="text-success">
                +$10.00
            </span>
        </td>
        <td>Amazon</td>
        <td>6/7/2017</td>
        <td>
            <div class="btn btn-danger">
                Delete
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="btn btn-default">
                Edit
            </div>
        </td>
        <td>Stanford Research Study</td>
        <td>
            <span class="text-success">
                +$15.00
            </span>
        </td>
        <td>Amazon</td>
        <td>6/10/2017</td>
        <td>
            <div class="btn btn-danger">
                Delete
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="btn btn-default">
                Edit
            </div>
        </td>
        <td>Steam Game</td>
        <td>
            <span class="text-danger">
                -$10.00
            </span>
        </td>
        <td>Game</td>
        <td>6/1/2017</td>
        <td>
            <div class="btn btn-danger">
                Delete
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="btn btn-default">
                Edit
            </div>
        </td>
        <td>Century Link Stream Service</td>
        <td>
            <span class="text-success">
                +$100.00
            </span>
        </td>
        <td>Visa</td>
        <td>6/1/2017</td>
        <td>
            <div class="btn btn-danger">
                Delete
            </div>
        </td>
    </tr>
</tbody>

还有初始化脚本，

@section Scripts{
<script>
    $(document).ready(function () {
        $("#anthony-transactions").DataTable();
    });
</script>
}

我希望从主题中获得这种风格的外观和感觉，您可以在其中看到分页、搜索和每页下拉结果的样式，

【问题讨论】：

在表格中不添加table 类的情况下你能做到吗？我猜这就是为什么要应用 Bootstrap 的默认表格样式以及 DataTables 的 Bootstrap 主题的原因。
@mark.hch 看起来不是问题，只是尝试删除它。
Bummer... 希望这对您来说是一个简单的解决方案。在这种情况下，我肯定会引导您沿着@AlexanderHiggins 提到的路径前进（检查适用于表格的 CSS 的开发工具，并尝试缩小与它有关的规则）。
解决了，再次感谢您的帮助。

标签： jquery css asp.net twitter-bootstrap datatables

【解决方案1】：

右键单击图标并从上下文菜单中选择检查元素，这将在您的浏览器中打开开发者控制台。示例中的图标的样式由引导带使用 ::after 应用。在窗口右侧检查元素后，您将看到样式表规则。在这里，您可能会发现正在应用另一个 css 规则，导致图标发生冲突。冲突规则将具有指向包含 CSS 和导致冲突的规则行号的文档的超链接。

此外，示例中的表格应用了表单类“table table-striped table-bordered dataTable”，其中标记中的表格应用了“table”。

有趣的是，这个表格在标题中有一个图标https://datatables.net/examples/styling/bootstrap.html，而这个表格有另一个https://datatables.net/examples/basic_init/table_sorting.html

第一个表定义在 /css/dataTables.bootstrap.min.css

table.dataTable thead .sorting::after {
opacity: 0.2;
content: "\e150";

}

第二个例子定义在/css/jquery.dataTables.min.css：

table.dataTable thead .sorting {
background-image: url("../images/sort_both.png");

}

这些规则冲突，同时拥有两个样式表将导致您看到两个图标。

【讨论】：

这件事让我失望了，因为我正在这样做，但我没有看到引导数据表 css 规则被覆盖，就像它们根本没有被应用在某些领域，而它们是在其他人。
如果您确定规则没有被覆盖，请检查附近的一些元素以查看规则是否应用于该规则。您还可以取消选中要停用的规则，然后查看计算选项卡以查看实际应用的内容。
在我检查和取消检查时找不到任何被覆盖的规则。看起来我的捆绑设置是否正确？
等等。或许真的有希望。我使用 Nuget 来获取我的数据表文件，我刚刚测试了一个安装最低限度的空项目，它似乎可以工作。应该可以解决这个问题。
尝试将演示表中的所有类和属性应用到您的表中。您的表只有“表”类。该演示具有类“table table-striped table-bordered dataTable”

【解决方案2】：

永远无法隔离出问题的细节，但我已经通过我的 Nuget 包管理器安装了数据表，所以我只是重新安装并删除了自我安装，我自己只安装了所需的文件并将它们捆绑起来，看起来工作正常。

【讨论】：