Home >Web Front-end >CSS Tutorial >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:
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!