Question

使用VS2012获得ASP MVC 4/5项目。添加了bootstrap 3.2

我看过其他几个在Twitter Bootstrap的Dashboard示例中遇到问题的人，但他们没有让我为自己的问题制定解决方案。

我有一个仪表板，并显示我使用tab-content和tab-panes css类的不同页面。但是，主要区域最终位于导航的下方和右侧。其他类似的问题提到了row-fluid，这是最新的bootstrap所没有的。我还通过修改我的CSS来尝试其中提出的各种答案。

这是我的代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#">Overview</a></li>
                <li><a href="#clients" data-toggle="tab">Clients</a></li>
                <li><a href="#orders" data-toggle="tab">Orders</a></li>
                <li><a href="#stock" data-toggle="tab">Stock</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main tab-content">
            <h1 class="page-header" style="margin-top: 0 !important;">Dashboard</h1>

            <div class="tab-pane" id="clients">
                @Html.Action( "Index", "Client")
            </div>
            <div class="tab-pane" id="orders">
                @Html.Action("Index", "Order")
            </div>
            <div class="tab-pane" id="stock">
                @Html.Action("Index", "Stock")
            </div>
        </div>
    </div>
</div>

也许我的css是错误的，或者我在主区域中加载页面的实现是错误的。感谢您提供任何答案/建议以使其发挥作用。

我尝试过的其他事情：使用ajax actionlink并将div作为目标更新

Answer 1

如果您已使用col-*值，则不需要使用offset类名：

<div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
        ...
    </div>
    <div class="col-sm-9 col-md-10 main tab-content">
        ...
    </div>
</div>

选中 Demo

带有制表符内容的CSS仪表板会导致主要区域显示在导航下方

1 个答案: