html - 如何使两列 div 跨越页面的整个宽度

Question

我希望下面的 div 跨越整个页面宽度，但它目前只跨越我页面的中间部分(其余内容也是如此)。

我尝试在我的 CSS 中包含 width:100%，我也尝试删除容器，但如果我无法并排显示两列这样做。

<div class="container full-width">
  <div class="row-fluid">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">

      <h2>What we do.</h2>
      <h4>Put some text in here about what we do just to see what it looks like. </h4>
      <a href="#"><button>Services</button></a>

    </div>
    
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">

      <a href="<?php bloginfo('url');?>"> <img src="<?php bloginfo('template_directory');?>/images/logo.png" class="img-fluid logo"> </a>

    </div>
  </div>
</div>

Answer 1

通过将最外层的 .container 更改为 .container-fluid，将任何固定宽度的网格布局转变为全宽布局。

https://codepen.io/arhoy/pen/NWKMgep?editors=1010