0

我正在尝试在 MVC4 项目中使用引导程序创建一个包含两列的网格。我已经安装了 Bootstrap 3 less 包，并且该站点已经选择了引导程序格式。但是，当我在页面上应用以下代码时，它只有一列。

<div class="row">
<div class="span4">
    <!--Sidebar content-->
    <ul class="nav nav-list">
        <li><a href="~/Scenario">Menu 1</a></li>
        <li><a href="~/QualityView">Menu 2</a></li>
        <li class="divider"></li>
        <li class="disabled"><a href="#">Menu 3</a></li>
    </ul>
</div>
<div class="span8">
    <!--Body content-->
    <table class="table table-striped"></table>
</div>

导航列表一直延伸到页面的右侧，当在下一列中输入内容时，它会出现在导航列表下方。关于我哪里出错的任何想法。

这是_Layout页面...

<!DOCTYPE html>
   <html lang="en">
<head>
    <meta charset="utf-8">
    <title>@ViewBag.Title - Varcidata</title>
    @RenderSection("meta", required: false)
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="~/Content/themes/default/bootstrap.css" rel="stylesheet">

    @Html.Partial("_html5shiv")

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="~/Content/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="~/Content/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="~/Content/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="~/Content/ico/apple-touch-icon-57-precomposed.png">
    <link href="~/Content/ico/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    @Html.Partial("_NavBar")

    <div class="container">
        @RenderBody()
        <hr />
        <div class="footer">
            <p>&copy; A Company 2013</p>
        </div>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

4

1 回答 1

0

使用 Bootstrap 3 你应该使用 col-* 而不是 span*。

<div class="row">
    <div class="col-4">
        <!--Sidebar content-->
        <ul class="nav nav-list">
            <li><a href="~/Scenario">Menu 1</a></li>
            <li><a href="~/QualityView">Menu 2</a></li>
            <li class="divider"></li>
            <li class="disabled"><a href="#">Menu 3</a></li>
        </ul>
    </div>
    <div class="col-8">
        <!--Body content-->
        <table class="table table-striped"></table>
    </div>
</div>
于 2013-10-11T04:11:36.403 回答