Question

我目前正在处理一个使用Bootstrap 4的模型，并且容器内有一个不常见的元素，背景扩展到容器之外。不确定这件事应该怎么做。我试图用位置来实现它：绝对，但我并不是它的粉丝，因为在那种情况下经纪人的反应。

有问题的元素是＆＃34;观看视频＆＃34;带背景的文字。

非常感谢任何帮助。感谢。

＆＃13;

/* 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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

基本上，这是has already been answered，但我会回答，因为Bootstrap 4 flexbox与其他3.x答案不同。

可以使用扩展到列外的伪元素来完成：

https://www.codeply.com/go/tXGn5pdD4A

.bg-colored:before {
    right: -999em;
    background:  #0b3b52;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

将元素扩展到引导容器之外

1 个答案: