具有固定宽度内容的全宽容器。 Sass，Bourbon整洁

Question

我希望我的背景全宽，图像或颜色背景填充行。但是，我希望这些内容能够位于标准12列的中间位置。

目前我的结构是：

<field name="heirarchy_sequence">BODA.0004.0003.0060</field>
<field name="heirarchy_sequence">BODA.0004.0003.0061</field>
<field name="heirarchy_sequence">gls.0001.0001.0001</field>
<field name="heirarchy_sequence">gls.0001.0001.0002</field>

相关的sass是：

   <div class="container">
    <section id="section">
        <div class="left-col">
            <p>some text</p>
        </div>
        <div class="right-col">
            <p>some text</p>
        </div>
    </section>
   </div>

这会导致容器跨越浏览器的整个宽度。但内部也是如此？我希望这个位于标准12列的中心位置？

提前致谢

Answer 1

保留当前的HTML我将在SCSS中执行以下操作：

.container {
  background-color: pink;
}

#section {
  @include outer-container;
  background-color: #fff;
}
div.left-col {
  @include span-columns(4);
}
div.right-col {
  @include span-columns(8);
}

这使得元素整齐的部分视为outer-container，让.container元素完成跨越整个浏览器窗口宽度的自然事物，允许您添加背景。

Answer 2

如果我的问题得到了解答，你想做一个“突破父母”

<强> HTML

<div class="container">
    <div class="break-out">Content</div>
</div>

<强> CSS

//  use border-box to prevent padding from
//  being added to width (alway do this)    
html { box-sizing: border-box; }
*,*:before,*:after { box-sizing: inherit; }


//  the container is aligned center with 
//  a maximum width of xxx (doesn't matter)
.container {
    margin: 0 auto;
    max-width: 960px; 
}

//  breaking out of the container 
.break-out {
   //  set the width to full screen width    
   width: 100vw;

   //  use calc to pull content back to the center
   margin-left: calc(50% - 50vw);

   //  to make the content re-align with the container
   //  use the reversed calc to set padding
   padding-left: calc(50vw - 50%);
}