带有选项卡内容的 CSS 仪表板导致主区域显示在导航下方

Question

获得了一个 ASP MVC 4/5 元素，使用 VS2012。添加了 bootstrap 3.2

我查看了其他几个在使用 Twitter Bootstrap 的仪表板示例时遇到问题的人，但他们并没有帮助我制定解决我自己问题的方法。

我有一个仪表板，为了显示不同的页面，我使用了 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 是错误的，或者我在主要区域加载页面的实现是错误的。感谢您提供的任何答案/建议，以使其正常工作。

我尝试的其他事情:使用带有 div 的 ajax actionlink 作为目标更新

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