CSS 使用Bootstrap创建占据100%宽度的两栏布局

在本文中，我们将介绍如何使用Bootstrap创建一个占据100%宽度的两栏布局。Bootstrap是一个流行的CSS框架，提供了许多方便的类和样式，可以帮助我们轻松地创建响应式布局。

阅读更多：CSS 教程

什么是两栏布局？

两栏布局是指将网页内容分为两个并排的区域，一个主要区域和一个侧边栏区域。主要区域通常包含主要内容，而侧边栏区域则包含辅助信息或导航菜单。

使用Bootstrap创建两栏布局

首先，我们需要在HTML文件中引入Bootstrap的CSS样式表和JavaScript文件。我们可以通过以下方式从CDN加载Bootstrap：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

在引入Bootstrap之后，我们可以开始创建我们的两栏布局。我们将使用Bootstrap的网格系统来实现这个布局。

<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <!-- 主要区域的内容 -->
    </div>
    <div class="col-lg-4">
      <!-- 侧边栏区域的内容 -->
    </div>
  </div>
</div>

在上面的代码中，我们使用了名为”container”的类来包裹整个布局。”container”类用于设置页面内容的最大宽度，并且居中显示。

在”container”中，我们创建了一个名为”row”的行，表示整个布局的一行。在这一行中，我们定义了两个列，一个占据8个网格的主要区域列（col-lg-8），一个占据4个网格的侧边栏区域列（col-lg-4）。

我们可以根据需要调整主要区域和侧边栏的宽度。在这个示例中，我们使用了响应式的类”col-lg-8″和”col-lg-4″，这意味着在大屏幕上，主要区域占据8个网格宽度，侧边栏占据4个网格宽度。在小屏幕上，这些列会自动适应屏幕大小。

自定义样式

除了使用Bootstrap提供的类之外，我们还可以根据需要自定义样式。例如，我们可以通过添加一个自定义类来改变主要区域和侧边栏的背景颜色：

<div class="container">
  <div class="row">
    <div class="col-lg-8 custom-main">
      <!-- 主要区域的内容 -->
    </div>
    <div class="col-lg-4 custom-sidebar">
      <!-- 侧边栏区域的内容 -->
    </div>
  </div>
</div>

<style>
.custom-main {
  background-color: #f1f1f1;
}

.custom-sidebar {
  background-color: #e9e9e9;
}
</style>

在上面的代码中，我们分别为主要区域和侧边栏添加了名为”custom-main”和”custom-sidebar”的自定义类，并通过内联样式为它们设置了特定的背景颜色。