Bootstrap面板和列表未显示

时间:2014-02-04 07:56:27

标签: html css twitter-bootstrap

我尝试在我的html页面中显示引导带列表组和面板,但它不起作用..

<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
    <h3 class="panel-title">Report Filling</h3>
</div>
<div class="panel-body">
    <ul class="list-group" style="max-width: 200px;">
        <li class="list-group-item">@Html.ActionLink("Upload CTR", "UploadCTR", "Upload")</li>
        <li class="list-group-item">@Html.ActionLink("Upload ETR", "UploadETR", "Upload")</li>
        <li class="list-group-item">@Html.ActionLink("Upload STR", "UploadSTR", "Upload")</li>
    </ul>
</div>

我的输出就像..

enter image description here

2 个答案:

答案 0 :(得分:2)

您的源代码完美无缺,但您错过了与CSS的良好链接,正如@ jyrc753所暗示的那样。

<html>
    <head>

        <link href="bootstrap.min.css" rel="stylesheet">

    </head>
    <body>
    <div class="container">
        <div class="panel panel-primary">
        <div class="panel-heading">
        <h3 class="panel-title">Report Filling</h3>
        </div>
        <div class="panel-body">
        <ul class="list-group" style="max-width: 200px;">
        <li class="list-group-item">@Html.ActionLink("Upload CTR", "UploadCTR", "Upload")</li>
        <li class="list-group-item">@Html.ActionLink("Upload ETR", "UploadETR", "Upload")</li>
        <li class="list-group-item">@Html.ActionLink("Upload STR", "UploadSTR", "Upload")</li>
        </ul>
        </div>
    </body>
</html>

这完全有效。

示例http://jsfiddle.net/xLmjv/

答案 1 :(得分:0)

ASP.NET MVC项目模板自动为引导程序创建包。检查它们是否已正确创建并加载到您的共享_Layout文件中:

@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")