Question

我在使用Asp.Net MVC 5在Visual Studio中显示我的页面上的Bootstrap组件时遇到了一些问题。我使用这些示例here作为下拉列表，使用here作为按钮组。

这就是页面的样子：

enter image description here

这是生成的页面源

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>NewIndex</title>
</head>
<body>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/justified-nav.css" rel="stylesheet"/>

    New Index page

    <div class="dropdown">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>

    <br />

    <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>


</body>
</html>

所有引用的文件都在各自的路径中。什么可能是错的？

Answer 1

根据我的评论：

您应该使用link代码添加CSS文件，而不是<script></script>阻止。脚本块用于添加Javascript。

在您的网页上添加外部样式表（CSS）：

每个页面都必须包含带有标记的样式表的链接。标签进入头部：

<head>
<link rel="stylesheet" type="text/css" href="yourstyle.css">
</head>

试试这个：

<link rel="stylesheet" type="text/css" href="/Content/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/Content/site.css" />
<link rel="stylesheet" type="text/css" href="/Content/justified-nav.css" />

根据 @cvrebert 注释，您必须在其他javascript文件之前包含Jquery库引用（jquery-1.10.2.js）。脚本文件的正确顺序是：

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

如上所述，您必须将link标记放入标题部分。所以页面的正确HTML看起来像这样 -

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>NewIndex</title>
    <!--Your CSS Style Sheets-->
    <link rel="stylesheet" type="text/css" href="/Content/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/Content/site.css" />
    <link rel="stylesheet" type="text/css" href="/Content/justified-nav.css" />
</head>
<body>
    <!--Your Script Files-->
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
    <div> 
        New Index page
        <br />
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
            <li role="presentation" class="dropdown-header">Dropdown header</li>
            ...
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">Dropdown header</li>
            ...
        </ul>
    </div>


    <div class="dropdown">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>
 </body>
</html>

Answer 2

将bootstrap.css引用从脚本标记更改为链接标记。例如：

<link href="../Styles/mystyle.min.css" rel="stylesheet" />

Twitter Bootstrap包含问题

2 个答案: