Bootstrap全宽行(带颜色)

eqoofvh9  于 11个月前  发布在  Bootstrap
关注(0)|答案(1)|浏览(142)

我购买了一个主题,我试图编辑它,但我坚持一件事。我试图添加一行(全宽栏与文本在它),从屏幕的一侧延伸到其他。它是在容器内,所以我明白,它是有限的容器宽度。
我已经尝试了类似问题的多个选项,但无法让它工作。
我试过了:How to create a 100% screen width div inside a container in bootstrap?
Bootstrap Element 100% Width
你可以在这里找到整个页面的所有代码http://pastebin.com/Vxxd0NDm
我想把它放在第217行。

7bsow1i6

7bsow1i61#

你必须确保关闭包含容器类的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/

相关问题