带颜色的引导全宽行答案

【问题标题】：Bootstrap full width row with color带颜色的引导全宽行
【发布时间】：2015-07-03 14:15:40
【问题描述】：

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

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

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

Bootstrap Element 100% Width

您可以在此处找到整个页面的所有代码 http://pastebin.com/Vxxd0NDm

我正在尝试将其添加到第 217 行。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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/

【讨论】：

那是我之前读到的。所以我需要计算所有的 div 并找出我必须关闭然后重新打开的数量？不知道如何关闭容器。
更新了我的答案，你可以在fiddle看到它
@ScottPilgrim 您还将看到我之前如何关闭容器 div，它将为您提供所需的一切！
@ScottPilgrim 通常你应该只关闭一个容器，然后如果你必须关闭它以使其 100% 宽度，你应该重新打开它，以确保页面的流程是相同的和以前一样。
啊，我在看小提琴。我只是尝试过这个并且它有效。我早些时候尝试过，但不确定为什么它不起作用。但是，这很有效，非常感谢您！