如何使用引导程序制作全宽响应式 div 部分？答案

【问题标题】：How can i make full width responsive div section using bootstrap?如何使用引导程序制作全宽响应式 div 部分？
【发布时间】：2018-06-22 07:26:47
【问题描述】：

如何使黄色部分全宽？我在引导程序中尝试了部分和 div 容器流体，但没有运气。我认为父 css 中存在我无法覆盖的固定尺寸。我只想制作一个响应式 div 部分全角，这样我就可以使用背景颜色或图像背景。提前致谢。

有问题的页面： http://dev.dragonscaletech.com/our-story/

<div class="container" style="background-color: yellow;">
<div class="row">
<div class="col-12 text-center">
  <h2>Reaching the Root of the problem..</h2>
  <h4>Scrubbing your back daily has always been so uncomfortable & 
 unrealistic, until now!</h4>
  <p>The fact that it allowed easy & hands-free access to the absolute hardest to reach area of the human body, meant that we needed to make it count & go after the root of the problem.</p>
  <p>We constantly neglect our back when we shower.</p>
  <p>Every other solution to this widespread hygiene shortcoming requires a full range of arm & body mobility, which frankly, not everyone has.</p>
  <p>Something as common as having sore muscles from last night's work out or even having too much muscle, can limit you from using any of these "alternatives-on-a-stick". Age, injury & disability can make it impossible.</p>
  <p>Once we understood the core issue, we got to work.</p>
</div>

【问题讨论】：

欢迎您！大多数人不想点击链接来寻找你的代码。请更新您的问题并包含相关问题的代码示例。

标签： html css wordpress twitter-bootstrap

【解决方案1】：

Bootstrap 容器确实有 15px padding 和 row 有 - 15px margin。因此，要么将row 类添加到您的section，要么将- 15px margin 添加到您的黄色section。希望下次可以使用代码或尝试使用代码进行快速响应。

【讨论】：

我希望黄色部分在屏幕上是全角的。模板中有一个固定的尺寸，我不知道要覆盖它。如果我删除填充或边距，它不会使其在屏幕上变黄。变化很小。
你用过container-fluid吗。
我尝试了容器流体，没有任何变化。 wordpress 主题受 @media (min-width: 1200px) 影响。如果我将宽度更改为 100% 几乎会拉伸全角，但会影响页面上的每个容器。我想让这个单个容器全宽。我只是在css中尝试了一个ID，但仍然没有运气。
看起来你的黄色 container 被引导程序 container 包围。检查一下。

【解决方案2】：

在谷歌上大量搜索后找到了这段代码。修复了我的问题。

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
 }

https://coderwall.com/p/hkgamw/creating-full-width-100-container-inside-fixed-width-container

【讨论】：