具有固定宽度内容的全宽容器。萨斯波旁威士忌答案

【问题标题】：Full width container with fix width content. Sass, Bourbon Neat具有固定宽度内容的全宽容器。萨斯波旁威士忌
【发布时间】：2017-01-11 17:19:50
【问题描述】：

我希望将背景设为全宽，并在行中填充图像或彩色背景。但是，我希望内容位于由整洁规定的标准 12 列的中间。

目前我的结构是：

   <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>

相关的 sass 是：

.container
 +outer-container(100%)
 background-color: #fff
 padding: 40px 0

 #lead-text
  +span-columns(12)

  .left-col
   +span-columns(4)

  .right-col
   +span-columns(8)

这会导致容器跨越浏览器的整个宽度。但是内部部分也是如此吗？我想把它放在标准 12 列的中间吗？

提前致谢

【问题讨论】：

标签： sass bourbon neat

【解决方案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 元素自然而然地跨越整个浏览器窗口宽度，允许您添加背景。

【讨论】：

大家好，我把这个放在一起，希望能更好地解释我的追求？
嗨，您是要发布链接吗？

【解决方案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%);
}

【讨论】：