Bootstrap全宽行，带颜色

Question

我购买了一个主题，并试图对其进行编辑，但是我只停留在一件事情上。 我正在尝试添加从屏幕的一侧延伸到另一侧的一行（其中带有文本的全宽栏）。 它在容器内，因此我知道它仅限于容器的宽度。

我已经尝试过类似问题的多个选项，但无法正常工作。

我尝试过： 如何在Bootstrap的容器内创建100％屏幕宽度div？

引导元素100％宽度

您可以在以下网址找到整个页面的所有代码： http：//pastebin.com/Vxxd0NDm

我正在尝试在217行下添加它。

Answer 1

您必须确保关闭具有容器类的div，然后在要创建的部分之后重新打开它。 然后，您只需按照以下方式进行div：

    <div class="container">
        <!-- FIRST PART OF YOUR WEBSITE, BEFORE WHAT YOU WANT TO CREATE -->
    <div> <!-- End of .container, that you're adding -->

    <!--Now the 3 row part, fullscreen 100% document width-->
        <div>
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
         </div>
  <!--Then, you reopen the container div that you have closed-->
  <div class="container">
  <!-- END OF YOUR WEBSITE, AFTER THE CODE YOU JUST ADDED -->

在此示例中，您将有3列，每列占整个页面部分的1/3。 div自然是父元素的全宽。 由于您关闭了之前包含容器的div（使代码居中），因此它将占用文档宽度的100％。

看小提琴； 不要忘记在其中放大输出窗口，因此您不会看到移动版本： https : //jsfiddle.net/oxw6tsuj/