当没有侧边栏时，使用Twitter BootStrap Css工具包实现全宽度内容

Question

我正在使用Twitter Bootstrap 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个网格。那么如果没有右侧或左侧边栏，如何使内容区域占用可用空间。

- Deeptechtons

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

请注意，这些链接中包含的示例代码涉及IT技术，如有需要，请咨询相关专业人士。

- Andres Ilich