Html 删除神秘的20px页边距-引导3.3.4

我已经把我的代码拆开了，还有一个恼人的小利润问题，我被难住了。我创建了一个Bootstrap v3.3.4网站，但在导航栏和图像上，有一个20px左右的边距，看起来像排水沟或悬挑。我尝试通过将此类应用于行来重置CSS边距和填充

.row.no-gutters {
     margin-left: 0;
     margin-right: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
     padding-left: 0;
     padding-right: 0;
}

并将其包含在我的样式表中

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

但我没法摆脱这些利润。我是从一个旧版本的网站工作的，它有不同的错误，我正在尝试修复…不知何故，虽然样式表几乎相同，但新版本的边距很时髦。这是故障点的图像

我希望导航栏看起来像什么：

导航栏当前的外观：

我希望侧边栏看起来像什么：

侧边栏当前的外观：

在Plunker上查看我的代码并在此处演示：

---

您会注意到侧边栏图像的左右两侧以及页脚中的占位符框周围有一个大约20px的小边距。我注意到边距保留在图像和文本中。在.wrapper和navbar之间也有一个20px的边缘悬垂，但在Plunker中不可能看到这一点。尽管我尝试过复制它。

Joansy，你需要纠正你的Twitter引导代码的错误做法。以下两项导致了您所说的

神秘边距

切勿将容器嵌套在另一个容器中

容器

引导需要一个包含元素来包装站点内容和 我们的网格系统。您可以从两个容器中选择一个用于 你的项目。注意，由于填充和其他原因，两个容器 它是可嵌套的

将行包装在容器中，以避免在

行

上设置负边距来扩展元素

---

Joansy，你需要纠正你使用Twitter引导代码的错误做法。以下两项导致了您所说的

神秘边距

切勿将容器嵌套在另一个容器中

容器

引导需要一个包含元素来包装站点内容和 我们的网格系统。您可以从两个容器中选择一个用于 你的项目。注意，由于填充和其他原因，两个容器 它是可嵌套的

将行包装在容器中，以避免在

行

上设置负边距来扩展元素

---

您当前使用的.row类没有他的.col-*子类。在引导中，一个

有一个

边距：0-15px

来补偿COL的15px填充。如果需要使用行，则需要添加列。如果不需要，只需删除父div的class.row

两种解决方案：

第一

您当前使用的.row类没有他的.col-*子类。在引导中，一个
有一个
边距：0-15px
来补偿COL的15px填充。如果需要使用行，则需要添加列。如果不需要，只需删除父div的class.row

两种解决方案：

第一

琼西又来了

Manoj Kumar关于如何使用引导
容器
和
行
是正确的

这就是给你带来问题的原因

看看这个

我很快就完成了一些更改，用您的代码解决了您的问题。

查看两个代码之间的差异。

底部的滚动条现在也消失了

更新了Fiddle，在图像上没有填充。

查看此，以了解您是否希望以这种方式显示图像
 琼西你好，又来了

Manoj Kumar关于如何使用引导
容器
和
行
是正确的

这就是给你带来问题的原因

看看这个

我很快就完成了一些更改，用您的代码解决了您的问题。

查看两个代码之间的差异。

底部的滚动条现在也消失了

更新了Fiddle，在图像上没有填充。

查看此，以了解您是否希望以这种方式显示图像
 你用的是什么浏览器？我无法使用chrome复制此内容。我使用的是最新版本的chrome Windows 7计算机。抱歉，仍然无法复制，可能是您安装的用户脚本/扩展。您使用的浏览器是什么？我无法使用chrome复制此内容。我使用的是chrome的最新版本Windows 7计算机。抱歉，仍然无法复制，可能是您安装的用户脚本/扩展？当我将div包装在容器中的.side行上方时，就像这样：它实际上在左边又增加了15像素的白边。你能举一个Bootly/Plunker的例子来说明你的意思吗？看看AngularJR的JSFIDLE。当我将div包装在一个容器中的.side行上方时，像这样：它实际上在左边又增加了15像素的白边。你能举一个Bootly/Plunker的例子来说明你的意思吗？看看AngularJR的JSFIDLE。我尝试了你的两个建议。第一，没有发生变化。第二，它使标题横幅图像消失（只剩下白色背景）。我尝试了你的两个建议。第一，没有发生变化。第二，它使标题横幅图像消失（只剩下白色背景）。AngularJR这解决了导航栏悬垂边距的问题。我仍在努力去除图像周围的空白（侧边栏顶部的一个，页脚上方的三个）。嗨，它实际上清除了导航道上的所有内容
 <div class="row">
  <div class="col-xs-12>
   YOUR NAVBAR CONTENT
  </div>
 </div>

 <div class="container wrapper">
  <!-- remove here the row class -->
        <header ....>