Question

如何使黄色部分全宽？我在bootstrap中尝试了section和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>

Answer 1

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

Answer 2

在google上进行了大量搜索后发现此代码。解决了我的问题。

.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

如何使用bootstrap制作全宽度响应div部分？

2 个答案: