如何使用 Twitter Bootstrap 创建固定流体布局？

使用 Twitter Bootstrap 创建 2 列固定流体布局

简介

创建具有固定宽度列和流体宽度列的布局是常见的要求响应式网页设计。这种布局样式支持固定的侧边栏或导航面板以及适应不同屏幕尺寸的灵活内容区域。使用Twitter Bootstrap，可以实现这一点布局。

实现

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;  
}

说明

• container-fluid 类创建填充整个视口的流体布局。
• row-fluid 类确保子元素填充可用宽度。
• .fixed 类设置侧边栏的宽度为固定值（例如 150px）。
• .fixed 同级元素的 margin-left 属性确保内容区域在
• fill 类在容器流体元素上设置 100% 的最小高度，确保侧边栏和内容区域具有相同的高度。
• .filler 元素，由::after 伪选择器，覆盖 .filler div 并给出两列高度相等的错觉。

以上是如何使用 Twitter Bootstrap 创建固定流体布局？的详细内容。更多信息请关注PHP中文网其他相关文章！