我目前正在使用 Bootstrap 4 制作一个模型，容器内有一个不常见的元素，其背景延伸到容器之外。不确定这件事到底应该如何做。我试图用position:absolute来实现它，但我不喜欢它，因为在这种情况下会破坏响应性。
有问题的元素是带背景的“观看视频”文本。
非常感谢任何帮助。谢谢。
/* VIDEO */
.video {
padding: 70px 0;
position: relative;
}
.video .video-wrapper p {
font-size: 14px;
line-height: 30px;
font-style: italic;
margin-top: 10px;
}
.video .description-wrapper h3 {
font-size: 20px;
line-height: 25px;
}
.video .description-wrapper .box {
padding: 10px 15px;
}
.bg-colored {
color: #fff;
background-color: #0b3b52;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Videos</title>
</head>
<body>
<section class="video">
<div class="container">
<div class="row">
<div class="col-md-5 video-wrapper">
<img src="https://i.imgur.com/mVWlLQt.png" class="img-fluid" alt="">
<p>Name video 5:45</p>
</div>
<div class="col-md-7 description-wrapper">
<div class="row align-items-center">
<div class="col-md-6 box">
<h3>Keep your club organized online,
we save time and energy for you!
</h3>
</div>
<div class="col-md-6 box bg-colored">
<h3>Watch the video</h3>
</div>
<div class="col-md-12">
<p>
Managing a team could also be a hassle free and easy activity.
CRM42 is a web based platform with a user friendly interface, offering a comfortable and profitable experience while using it. Create your new management strategy and focus on getting the best results.
Your goal is now our goal!
</p>
<p>
CRM42 gives you a complete solution with a 360-degree view of your players, including complete management of their contracts, injuries, medicals, offers, past teams, even family members, bank accounts and all sponsors information.
Accessible for your entire staff, anytime from anywhere.
</p>
<p>
Let’s make something awesome together!
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>最佳答案
基本上，这个 has already been answered ，但我会回答，因为 Bootstrap 4 flexbox 与其他 3.x 答案不同。
可以使用延伸到列之外的伪元素来完成:
https://codeply.com/go/tXGn5pdD4A
.bg-colored:before {
right: -999em;
background: #0b3b52;
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
关于html - 将元素扩展到 Bootstrap 容器之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48598458/