Bootstrap 4设置宽度:100%；到具有"container“类的div项的子项

Bootstrap 4 是一个流行的前端框架，用于快速构建响应式网页设计。在 Bootstrap 中，container 类是一个用于包裹内容的容器，它提供了固定的宽度，并且居中显示。container 类有两种形式：container 和 container-fluid。container 提供了响应式的固定宽度，而 container-fluid 则会占据整个视口的宽度。

当你想要设置一个子元素的宽度为 100%，并且这个子元素是 container 类的 div 的直接子元素时，你需要确保子元素的宽度不受父元素的 padding 影响。Bootstrap 的 container 类默认有左右各 15px 的 padding，这会影响子元素的宽度计算。

以下是如何设置子元素宽度为 100% 的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Width Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
  .full-width {
    width: calc(100% + 30px); /* 加上 container 的左右 padding */
    margin-left: -15px; /* 抵消左侧 padding */
    margin-right: -15px; /* 抵消右侧 padding */
  }
</style>
</head>
<body>

<div class="container">
  <div class="full-width bg-primary text-white p-3">
    This div has a width of 100% including the container's padding.
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

在这个例子中，.full-width 类通过使用 calc() 函数来计算宽度，包括了 container 的左右 padding。同时，通过设置负的左右 margin 来抵消 container 的 padding，从而使得子元素的实际宽度为 100%。

这种方法的优点是可以确保子元素在不同的屏幕尺寸下都能保持宽度为 100%，同时保持与 Bootstrap 的兼容性。这种设置在需要子元素完全填满 container 宽度时非常有用，例如在创建全宽的导航栏或页脚时。

应用场景包括但不限于：