Question

当视口大小为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>

Answer 1

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

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

Answer 2

如果您搜索最快的方式以使标题的页面全宽，则必须将另一个类添加到两个div（让我们称之为＆＃ 39;全宽＆＃39; 例如）。结果应该是这样的：

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

此类将重置所有填充/边距，并将宽度设置为 100％（每次（或几乎）每个）元素与这个类。在此之后，将保留少量边距（8px），这是body元素的边距。如果你想摆脱它们，只需在你的css中包含这段代码：

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

这是一个不能打破另一个css的快速方法。但是，如果您想知道应该更改哪些属性（可以手动更改而不是添加＆＃39;全宽＆＃39; 类），看看：

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

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

您还需要重置 327 和 328

行上的填充

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

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

如何摆脱966网格中的左右边距？

2 个答案: