CSS 如何使用Twitter Bootstrap构建一个固定-流动的2列布局

在本文中，我们将介绍如何使用Twitter Bootstrap构建一个2列布局，其中一列是固定宽度，另一列是流动宽度。我们将通过一些示例说明来帮助您理解。

阅读更多：CSS 教程

HTML结构

首先，我们需要一个基本的HTML结构来构建我们的布局。以下是一个示例：

<div class="container">
  <div class="row">
    <div class="col-md-3 sidebar">
      <!-- 左侧固定列内容 -->
    </div>
    <div class="col-md-9 content">
      <!-- 右侧流动列内容 -->
    </div>
  </div>
</div>

在这个结构中，我们使用了Twitter Bootstrap的网格系统。容器（container）类用于包裹整个布局，并提供了响应式的宽度。行（row）类定义了一行，而列（col-md-3和col-md-9）类定义了列的宽度。

CSS样式

接下来，我们需要一些CSS样式来定义我们的布局，并使其具有所需的外观和功能。以下是一个示例：

.container {
  padding-top: 50px;
}

.sidebar {
  background-color: #f2f2f2;
  padding: 20px;
}

.content {
  padding: 20px;
  background-color: #fff;
}

在这个样式中，我们为容器添加了一些顶部填充，以便给固定列腾出空间。左侧固定列使用了背景颜色和填充来区分它与流动列。流动列只有填充，以及背景颜色来区分它与固定列。

响应式支持

使用Twitter Bootstrap，我们的2列布局也将具有响应式的特性。这意味着在不同的设备上，布局将自动适应屏幕大小。例如，对于较小的屏幕，我们可以将固定列设为隐藏，使流动列在整个屏幕上占据全部空间。以下是一个示例：

<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12 content">
      <!-- 响应式流动列内容 -->
    </div>
  </div>
</div>

在这个例子中，我们使用了.col-md-12、.col-sm-12和.col-xs-12类，它们分别定义了在大、中和小屏幕上占据全部空间的列。

示例

现在让我们来看几个示例，以更好地理解这个布局。

示例1：两列等高布局

<div class="container">
  <div class="row">
    <div class="col-md-6 col-xs-6 sidebar" style="height: 300px;">
      <!-- 左侧固定列内容 -->
    </div>
    <div class="col-md-6 col-xs-6 content" style="height: 300px;">
      <!-- 右侧流动列内容 -->
    </div>
  </div>
</div>

在这个示例中，通过设置固定列和流动列的高度相等，我们创建了一个等高布局。这将确保两列总是具有相同的高度。

示例2：左右布局

<div class="container">
  <div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6 sidebar">
      <!-- 左侧固定列内容 -->
    </div>
    <div class="col-md-9 col-sm-8 col-xs-6 content">
      <!-- 右侧流动列内容 -->
    </div>
  </div>
</div>

在这个示例中，我们使用了不同的列类来定义在不同屏幕尺寸上的宽度。这样，我们可以创建一个在大屏幕上具有更宽固定列和较窄流动列的布局，而在小屏幕上则相反。