How Can You Achieve a Fixed-Width Sidebar and Fluid-Width Content Area in Twitter Bootstrap?

Implementing Fixed-Fluid Layout with Twitter Bootstrap

Despite the popularity of Twitter Bootstrap, concerns have been raised about its ability to create a two-column layout featuring a fixed-width side panel and a fluid-width content area.

Possible Solutions:

Original Solution (Bootstrap v1.0)

Using a combination of modified HTML and CSS, it is possible to achieve a fixed-fluid layout in Bootstrap v1.0. The updated code is as follows:

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- Fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- Removed spanX class -->
            ...
        </div>
    </div>
</div>

.fixed {
    width: 150px;  /* Fixed width */
    float: left;
}

.fixed + div {
    margin-left: 150px;  /* Match fixed width */
    overflow: hidden;
}

/* CSS to ensure sidebar and content are same height (optional) */

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    position: relative;
}

.filler::after{
    background-color:inherit;
    bottom: 0;
    content: "";
    left: 0;
    margin:inherit;
    min-height: 100%;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

Updated Solution (Bootstrap v2.0)

The removal of the ".container-fluid" class in Twitter Bootstrap v2.0 made the original solution incompatible. However, slight CSS modifications allow for the implementation of a two-column fixed-fluid layout:

.fixed {
    width: 150px;  /* Fixed width */
    float: left;
}

.fixed + div {
    margin-left: 150px;  /* Match fixed width */
    overflow: hidden;
}

Ensuring Equal Height for Sidebar and Content

While not necessary, it is often desirable to ensure that the sidebar and content columns have the same height. This can be achieved by adding a ".filler" class to the fluid-width column and using the ::after pseudo selector to add a filler element that appears to fill the remaining space.

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    height: 100%;
    left: 150px;  /* Match fixed width */
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;  
}

Notes:

• For a fluid-fluid layout, set ".container-fluid" to have a min-height of 100%.
• To have the filler element on the left side of the page, change "left: 150px;" to "right: 0;".

The above is the detailed content of How Can You Achieve a Fixed-Width Sidebar and Fluid-Width Content Area in Twitter Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!