1. 引言
在Web开发中，CSS是一种用于控制和美化网页布局和样式的编程语言。它不仅可以调整字体、颜色和边距等元素，还可以给容器、导航栏等元素设置背景。在使用CSS时，经常会遇到需要将一个具有全宽背景的容器居中分开的情况。本文将介绍如何在Bootstrap的.container中实现这一效果。
2. Bootstrap .container
Bootstrap是一个流行的前端开发框架，提供了丰富的CSS和JavaScript组件，可以帮助开发者快速构建响应式的网页。.container是Bootstrap中常用的一个CSS类，用于创建具有固定宽度的容器。在以下代码中，我们将使用.container来创建一个具有全宽背景的容器：
.container {
width: 100%;
background-color: #f2f2f2;
padding: 20px;
}
3. 分开容器
要实现全宽背景的.container在中间分开的效果，我们可以借助伪元素:before和:after来实现。具体的实现步骤如下：
3.1 添加伪元素
首先，在.container的CSS样式中添加伪元素:before和:after：
.container {
position: relative;
}
.container:before, .container:after {
content: "";
display: table;
clear: both;
}
上述代码中，我们给.container设置了相对定位，并为它的:before和:after伪元素添加了清除浮动的效果。这样可以确保在.container中的元素正常布局，并且能够将其分成两个部分。
3.2 调整伪元素样式
接下来，我们需要对伪元素的样式进行调整，使其成为容器分割线的效果：
.container:before, .container:after {
content: "";
display: block;
height: 1px;
width: 50%;
background-color: #ccc;
position: absolute;
top: 50%;
z-index: 1;
}
.container:before {
left: 0;
}
.container:after {
right: 0;
}
上述代码中，我们设置了伪元素的高度为1px、宽度为50%（即容器的一半宽度），并为它们设置了背景颜色和位置。通过将伪元素的高度设置为1px，我们可以让它们在容器中间形成一条细线，从而将.container分成两个部分。
3.3 调整容器内部布局
为了让容器内的内容正常显示，我们还需要对容器内部元素的样式进行调整：
.container {
padding-top: 50px;
padding-bottom: 50px;
position: relative;
}
.container > * {
position: relative;
z-index: 2;
}
上述代码中，我们通过调整容器的上下内边距（padding-top和padding-bottom）使得容器内的内容与分割线保持一定的距离。而为了确保内容能够正常显示，我们给容器内的元素设置了相对定位，并为它们设置了z-index，使其在分割线的上方显示。
4. 总结
通过以上的CSS样式调整，我们成功实现了一个具有全宽背景的.container在中间分开的效果。通过在容器的:before和:after伪元素中添加细线，并调整容器内部元素的样式，我们让容器在视觉上更加美观，并且能够分成两个部分。在实际开发中，我们可以根据需要调整分割线的宽度、颜色和位置等样式，以适应不同的设计需求。