How to Create a Fixed-Fluid Layout with Twitter Bootstrap?

Creating a 2 Column Fixed-Fluid Layout with Twitter Bootstrap

Introduction

Creating a layout with a fixed-width column alongside a fluid-width column is a common requirement for responsive web design. This layout style enables a fixed sidebar or navigation panel alongside a flexible content area that adapts to different screen sizes. Using Twitter Bootstrap, it is possible to achieve this layout.

Implementation

HTML

<div class="container-fluid fill">
  <div class="row-fluid">
    <div class="fixed">
      ...
    </div>
    <div class="filler">
      ...
    </div>
  </div>
</div>

CSS

.fixed {
  width: 150px;
  float: left;
}

.fixed + div {
  margin-left: 150px;  
  overflow: hidden;
}

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

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

Explanation

• The container-fluid class creates a fluid layout that fills the entire viewport.
• The row-fluid class ensures that child elements fill the available width.
• The .fixed class sets the width of the sidebar to a fixed value (e.g., 150px).
• The margin-left property of the .fixed sibling element ensures that the content area starts after the sidebar.
• The fill class sets a minimum height of 100% on the container-fluid element, ensuring the sidebar and content area are the same height.
• The .filler element, created by the ::after pseudo selector, overlays the .filler div and gives the illusion of equal height for both columns.

The above is the detailed content of How to Create a Fixed-Fluid Layout with Twitter Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!