html - 将 div 拉伸(stretch)到固定宽度元素内的全宽

Question

我有一个博客页面，我正在使用 col-md-8 ，里面col-md-8我的内容存在，但我想将我的一个 div 拉伸(stretch)到全宽，即 col-md-8 。我的页面

我想让它拉伸(stretch)， 我的代码:

.joinUs {
  width: 100vw;
  margin-left: -33.333333%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="article--publishedDate smallText text-uppercase">
          Published : 02 June 2019
        </div>
        <div class="article--topDescription mt-54px">
          In the above video, I have talked about top font management apps for Windows and Mac OS. Most of the Windows Font Management apps are Free and for Mac most of them are paid. I have talked about the top apps for Windows and Mac.
        </div>

        // I wanna make it stretch to full width of the browser
        <div class="joinUs">
          <div class="row">
            <div class="col-md-8">
              <div class="sectionTitle allCaps-Bold">
                <span>Start learning for FREE Today - Visual Design Class</span>
              </div>
            </div>
            <div class="col-md-4">
              <div class="joinUs--title">
                Join my community of <span>41257</span> students from <span>170</span> countries worldwide.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

但是没用

请帮帮我，我被困住了

Answer 1

检查一下。希望这可以帮助。 有两种方法可以实现此目的，

1. 负边距和 VW 宽度
2. 内容在固定的容器中，但让 :before :after 达到全 Angular 效果。 (蓝一)

/*Container style is for illustration purpose only */

.container {
  background: gray;
  min-height: 400px;  margin-bottom: 100px;
}


/*Can achive using vw css unit*/
.row-full {
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  height: 100px;
  margin-top: 100px;
  left: 50%;
}

/*<!--- 2nd way --> */

.content_box {
    padding: 54px 0 21px;
    color: #fff;
    background-color: #88bae1;
    margin-bottom: 145px;
    position: relative;
    z-index: -1;
}
 .content_box:before {
    content: "";
    position: absolute;
    height: 100%;
    left: -3000px;
    right: -3000px;
    background-color: #88bae1;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: auto !important;
}

<div class="container">
    
    <div class="row" style="height:100px; background: #fff;"> this is ok</div>
    <div class="row row-full" style="height:100px; background: #f00;">
        this should take 100% width
    </div>
</div>


<!--- 2nd way --> 


<div class="content_box">
<div>Lorem ipsum</div>
</div>

解决您的问题

.joinUs:before {
    content: "";
    position: absolute;
    height: 100%;
    left: -3000px;
    right: -3000px;
    background-color: #ebf0f8;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: auto !important;
}

和body{overflow-x:hidden;}