966格如何去掉左右边距？答案

【问题标题】：How to get rid of the left and right margins in 966 grid?966格如何去掉左右边距？
【发布时间】：2016-09-23 17:10:56
【问题描述】：

当视口大小为 784 x 741 时，我想删除的框应用了左右边距。我知道如何摆脱顶部的“空白”，但这是我无法摆脱的“侧面空白”。有谁知道如何消除空白，使标题延伸整个宽度浏览器视口的？我的代码笔在下面。

codepen

<div class="container">
    <div class="grid_12">
        <header>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a><li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <h1>ALIEN</h1>
        </header>
    </div>
</div>

【问题讨论】：

那么不要使用 996。 996（和960）网格的重点是创建一个最大宽度为996px的容器。
那么当浏览器窗口重新调整大小时，真的没有办法消除它吗？我理解当视口完全打开时，我希望当视口更小时，我可以摆脱侧面的边距。你会推荐什么其他框架？我想学习 996，因为它具有出色的浏览器支持。
您可以根据需要覆盖 996 网格中的任何 CSS。这就是 CSS 的美妙之处。我的建议是，如果您的标题只是一个大列，为什么要对其应用列样式？
我猜只是为了练习。可能有客户希望标题在较小的屏幕上一直延伸。

标签： html css frameworks grid

【解决方案1】：

如果你搜索最快的方法使标题全屏，你必须在两个 div 中添加另一个类（我们称之为 'full-width' 例如）。结果应该是这样的：

HTML

<div class="container full-width">
    <div class="grid_12 full-width">
    <!-- another code -->
    </div>
</div>

CSS

.full-width {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

这个类将重置所有paddings/margins并将width设置为100%（或几乎每个）元素与这个类。在此之后，将保留少量边距（8px），这是body 元素的边距。如果您也想摆脱它们，只需在您的 css 中包含以下代码：

body {
  margin-left: 0;
  margin-right: 0;
}

这是不能破坏另一个 css 的快速方法。但是，如果您想知道应该更改哪些属性（您可以手动更改它们，而不是添加我们的 'full-width' 类），请查看：

您可以将 105 和 106、221 和 222 行更改为

margin-left: 0;
margin-right: 0;

您还需要重置行 327 和 328

上的填充

padding-left: 0;
padding-right: 0;

不要忘记将width: 100% !important; 设置为container 和grid_12 divs！为了不破坏剩余的 css，请添加新的类或 ide。

【讨论】：

看起来很完美。谢谢。

【解决方案2】：

您似乎可以将任何媒体查询的边距更改为您想要的任何值（或通过添加margin: 0; 属性来删除它们）。如果要清除所有元素的边距，只需在 CSS 顶部的某处应用 * {margin: 0;}（以防万一，让我提醒 * 选择所有元素）。

您还可以分别更改margin-top、margin-right、margin-bottom 和margin-left 属性。选择您想要的任何媒体查询并为其覆盖margin 属性。如果这不能解决您想要的问题，您必须通过更改来解决此问题位置和元素的宽度。

【讨论】：

好的。我去看看。虽然有很多 CSS 正在进行，但会确切知道我应该更改哪些边距？我有一种感觉，它会是。网格_xx。并感谢您的帮助。
我会尽快给你完整的答案。
好的。我在网格上练习了一段时间，还没有弄清楚。