Question

我购买了一个主题，我正在尝试编辑它，但我坚持一件事。我正在尝试添加一行（带有文本的全宽条），从屏幕的一侧延伸到另一侧。它在容器内，所以我理解它仅限于容器宽度。

我尝试了类似问题的多个选项，但无法使其发挥作用。

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

您可以在此处找到整个页面的所有代码 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/

带颜色的Bootstrap全宽行

1 个答案: