Question

在html中使用Bootstrap和KendoUI时，引用的正确引用顺序和文件是什么？

现在我有一个视图，我猜你可以调用一个母版页，我已经引用了Bootstrap和KendoUI，但我注意到在创建一个网格时，并为它添加了过滤功能，我得到两个额外的列，如下所示这里..

但是，当我将代码添加到KendoUI的dojo中时，它看起来很正常，如此处所示......

所以我想我可能错误地引用了

这是我的＆＃34;主页＆＃34;

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <script src="~/Scripts/jquery-2.1.0.min.js"></script>
    <script src="~/Scripts/Kendo.2016.1.226/kendo.all.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>

    @Styles.Render("~/Content/css")

    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrapValidator.min.css")" rel="stylesheet" type="text/css" />

    <!--Kendo style-->
    <link href="~/Content/Kendo.2016.1.226/kendo.default.min.css" rel="stylesheet" />
    <link href="@Url.Content("~/Content/Kendo.2016.1.226/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Kendo.2016.1.226/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />

    <link href="@Url.Content("~/Content/Custom/Layout.css")" rel="stylesheet" type="text/css" />

    <link href="~/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/Custom/MyTest.css" rel="stylesheet" />
    <link href="~/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/Custom/GlobalStyle.css" rel="stylesheet" />

</head>
<body>
    <div class="container">
        <div class="row">
            <header>
                <center><img src="~/Images/test-logo-sm.png" /></center>
            </header>
        </div>
        <nav class="v-wrapper">
            <ul>
                <li class="v-brand">

                    <center><lh><label style="font-weight:bold; color:white;">Menu</label></lh></center>
                </li> 
                <li>
                    <span class="glyphicon glyphicon-dashboard" style="color:green;"></span><a href="#" id="dashboard"> Dashboard</a>
                </li>
                <li>
                    <span class="fa fa-users" style="color:#003366;">&nbsp;</span><a href="#" id="manageusers">Manage Login Users</a>
                </li>
                <li>
                    <span class="fa fa-group" style="color:orange;">&nbsp;</span><a href="#" id="managegroups">Manage Groups</a>
                </li>
                <li>
                    <span class="fa fa-gears" style="color:red;">&nbsp;</span><a href="#">Manage VS Equipment</a>
                </li>
            </ul>
        </nav>
    </div><!-- End Upper Container -->

    <div class="container body-content">
        <div class="row">
            <div class="col-md-12 col-lg-12">
                <h1>Blah</h1>
                <p> This is where your main stuff goes</p>
            </div>
        </div><!-- End Row -->
    </div><!-- End Main Container -->
    <!-- Scripts -->
    @*<footer class="footer"><p align="center">Footer Content Goes here</p></footer>*@

    <script>
        $(document).ready(function () {
            $('#manageusers').click(function () {
                $('.body-content').load("../ManageLoginUsers/ManageUsers");
            });

            $('#managegroups').click(function () {
                $('.body-content').load("../ManageGroups/ManageGroups");
            });
        });
    </script>

</body>
</html>

我无法让Bootstrap和KendoUI一起玩，我认为这可能与我引用所有CSS和Scripts的顺序有关。

那么正确的顺序是什么？

Answer 1

所以经过几天的测试参考订购，我想出了这个订单..

JQuery JS
Bootstrap JS
Bootstrap CSS

KendoAll JS
Kendo Default CSS
Kendo Common Bootstrap CSS

这似乎是正确的，因为我没有更多的问题。当我在我的问题中查看上面的代码时，我看到它看起来有多可怕，我还在屏幕截图中解决了这个问题。问题来自另一个开发人员CSS文件，它覆盖了很多东西。

在html中使用Bootstrap和KendoUI时，是否正确引用引用顺序和文件？

1 个答案: