html - Bootstrap 带颜色的全宽行

Question

我购买了一个主题并尝试对其进行编辑，但我被困在一件事上。我正在尝试添加从屏幕的一侧延伸到另一侧的行(其中包含文本的全宽条)。它在容器内，所以我知道它受限于容器宽度。

我已经尝试了类似问题的多个选项，但无法让它发挥作用。

我试过: How to create a 100% screen width div inside a container in bootstrap?

Bootstrap Element 100% Width

你可以在这里找到整个页面的所有代码 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%。

看看 fiddle ；不要忘记放大其中的输出窗口，这样您就看不到移动版本:https://jsfiddle.net/oxw6tsuj/