带左偏移量的div上的Bootstrap 3镜像

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。Bootstrap 3 是该框架的一个版本，提供了丰富的组件和工具，帮助开发者快速构建网页。

左偏移量（Left Offset）通常用于控制元素在页面中的水平位置。在 Bootstrap 3 中，可以使用栅格系统（Grid System）和偏移类（Offset Classes）来实现这一点。

类型

在 Bootstrap 3 中，偏移类用于在栅格系统中调整元素的水平位置。偏移类的命名规则如下：

.col-md-offset-*：用于中等屏幕（md）及以上的偏移。
.col-sm-offset-*：用于小屏幕（sm）及以上的偏移。
.col-xs-offset-*：用于超小屏幕（xs）及以上的偏移。

其中，* 表示偏移的列数，范围从 1 到 11。

应用场景

左偏移量常用于以下场景：

对齐元素：将某个元素与页面中的其他元素对齐。
创建间距：在元素之间创建一定的水平间距。
布局调整：根据设计需求调整元素的布局。

示例代码

以下是一个使用 Bootstrap 3 实现带左偏移量的 div 的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 3 Offset Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    .offset-div {
      background-color: #f0f0f0;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-md-offset-4 offset-div">
        This div is centered with a left offset of 4 columns.
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

在这个示例中，.col-md-4 col-md-offset-4 类将 div 元素在中等屏幕及以上的宽度下设置为 4 列宽，并向左偏移 4 列，从而实现居中对齐的效果。