0

MVC4 プロジェクトでブートストラップを使用して 2 つの列を持つグリッドを作成しようとしています。Bootstrap 3 less パッケージをインストールしたところ、サイトはブートストラップのフォーマットを取得しました。ただし、ページに次のコードを適用すると、列が 1 つしかありません。

<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>

nav-list はページの右側まで伸びており、次の列に何かを入力すると nav-list の下に表示されます。どこが間違っているかについてのアイデア。

これが_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 では、span* ではなく col-* を使用する必要があります。

<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 に答える