Home >Web Front-end >CSS Tutorial >Can Twitter Bootstrap be used to create a two-column layout with a fixed-width sidebar and a fluid-width main content area?
Creating a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap
In this article, we'll delve into whether it's feasible to achieve a two-column layout with a fixed-width sidebar and a fluid-width main content area using Twitter Bootstrap. We'll provide comprehensive explanations and solutions to guide your development.
Is it Possible with Twitter Bootstrap?
Twitter Bootstrap initially included a fixed-fluid layout option through the ".container-fluid" class. However, with the release of version 2.0, this feature was removed. Hence, it's not possible to implement a fixed-fluid layout solely using the standard Bootstrap classes.
Solution
1. Fixed-Fluid Layout
We can implement a fixed-fluid layout using a combination of modified HTML and CSS:
HTML:
<div>
CSS:
.fixed { width: 150px; float: left; } .fixed + div { margin-left: 150px; overflow: hidden; } html, body { height: 100%; } .fill { min-height: 100%; position: relative; } .filler::after{ background-color:inherit; bottom: 0; content: ""; height: auto; min-height: 100%; left: 0; margin:inherit; right: 0; position: absolute; top: 0; width: inherit; z-index: -1; }
2. Equal Column Heights (Optional)
To achieve equal heights for the sidebar and content area:
HTML:
<div>
Notes:
The above is the detailed content of Can Twitter Bootstrap be used to create a two-column layout with a fixed-width sidebar and a fluid-width main content area?. For more information, please follow other related articles on the PHP Chinese website!