使用 Twitter BootStrap Css Toolkit 没有侧边栏时的全宽内容

Posted 2023-03-06

【中文标题】使用 Twitter BootStrap Css Toolkit 没有侧边栏时的全宽内容

【英文标题】：Full width content when no sidebar using Twitter BootStrap Css Toolkit

【发布时间】：2012-01-13 02:23:51

【问题描述】：

我正在使用 twitter 引导 css 工具包为 asp.net webforms 2.0（也是 .NET 2.0）中的应用程序构建母版页。没有什么编程问题，虽然它是关于我得到页面的设计

    Header
    Breadcrumb
    Maincontent
    -leftsidebar
    -pageContent
    -rightsidebar
    Footer

是的，这是侧边栏问题之一，我得到了如下所示的 html

        <div class="row">
            <div class="span4">
                <!--Place holder for left sidebar-->
                <asp:ContentPlaceHolder runat="server" id="phLeftSidebar">
                </asp:ContentPlaceHolder>
            </div>
            <div class="content">
                <!--Place holder for main content-->
                <asp:ContentPlaceHolder runat="server" id="phpageContent">
                </asp:ContentPlaceHolder>
            </div>
            <div class="span4">
                <!--Place holder for right sidebar-->
                <asp:ContentPlaceHolder runat="server" id="phRightSidebar">
                </asp:ContentPlaceHolder>
            </div>
        </div>

问题

在其中一个内容（子）页面中，我没有左侧边栏的内容，并且我希望中间内容也占用该空间，因为右侧边栏仅跨越 4 个网格。那么我如何让content section 在没有right or left sidebar 的情况下占用可用空间。

【参考方案1】：

我回答了一个和这个很相似的问题，你可以看看结果here。

它基本上归结为创建一组新的类，您可以将它们添加到子页面的.content 区域，以便它符合您的侧边栏。

只需将其添加到您的主 CSS 中，然后根据您的侧边栏需要添加一个类到您的 .content 区域：

.fixed-fluid 
    margin-left: 240px;

.fluid-fixed 
    margin-right: 240px;
    margin-left:auto !important;

.fixed-fixed 
    margin: 0 240px;

这是一个外观演示：

不带左侧边栏：http://jsfiddle.net/6vPqA/4/show/ 没有右侧边栏：http://jsfiddle.net/6vPqA/5/show/