Bootstrap 不适用于 asp.net 母版页答案

【问题标题】：Bootstrap is not applying in asp.net master pageBootstrap 不适用于 asp.net 母版页
【发布时间】：2016-11-07 07:30:26
【问题描述】：

我在 asp.net 中有一个母版页。

下面是完整的 .aspx 文件。

CSS 使用 bootstrap 添加到 div 标签。已给出所有链接。

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="apage.master.cs" Inherits="Website.apage" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <asp:ContentPlaceHolder ID="head" runat="server">

        <link href="Content/bootstrap.css" rel="stylesheet" />
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.1.1.min.js"></script>
        <script src="Scripts/bootstrap.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
     </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div id="Panel_Main" style="box-shadow: 0 0 02px blue;" class="panel panel-primary">

            <div id="Panel_Heading" class="panel-heading">
                <table style="width: 100%;">
                    <tr>
                        <td>
                            <div class="text-left">
                                <h4 style="font-family: Calibri; font-size: xx-large; font-weight: normal; font-style: normal; font-variant: normal; color: #FFFFFF">MyWebsite</h4>

                            </div>
                        </td>

                    </tr>
                </table>
            </div>
                            <asp:ContentPlaceHolder ID="childContainer" runat="server">
                            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

我正在尝试使用子页面运行。但是浏览器没有应用css。

我有另一个配置相同的母版页，它工作正常。但是对于这个页面，没有应用 css。

我在这里错过了什么吗？

感谢任何帮助。

【问题讨论】：

标签： css asp.net twitter-bootstrap

【解决方案1】：

试试这个

您的所有脚本和所有 Js 都写在 asp:ContentPlaceHolder 之外

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <asp:ContentPlaceHolder ID="head" runat="server">

     </asp:ContentPlaceHolder>

        <link href="Content/bootstrap.css" rel="stylesheet" />
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.1.1.min.js"></script>
        <script src="Scripts/bootstrap.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div id="Panel_Main" style="box-shadow: 0 0 02px blue;" class="panel panel-primary">

            <div id="Panel_Heading" class="panel-heading">
                <table style="width: 100%;">
                    <tr>
                        <td>
                            <div class="text-left">
                                <h4 style="font-family: Calibri; font-size: xx-large; font-weight: normal; font-style: normal; font-variant: normal; color: #FFFFFF">MyWebsite</h4>

                            </div>
                        </td>

                    </tr>
                </table>
            </div>
                            <asp:ContentPlaceHolder ID="childContainer" runat="server">
                            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

【讨论】：

太棒了。工作。谢谢:)
请注意，在子页面上运行的任何 JQuery 脚本之上设置的方式将不起作用，因为内容占位符位于脚本声明之前，即，JQuery 将在引用之前使用加载。始终在头部的内容占位符之前加载母版页脚本