第一

Question

我已经把我的代码拆开了，并且有一个烦人的小边际问题，我很难过。我创建了一个Bootstrap v3.3.4网站，但是在导航栏和图像上，有一个20px-ish的边距，看起来像一个排水沟或悬垂。我已经尝试通过将此类应用于行

来重置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上进行演示：

http://plnkr.co/edit/IPVa7Y86Grv1SSj9hWBt?p=preview

您会注意到侧边栏图像左侧和右侧以及页脚中占位符框周围的边距约为20px。我注意到边距仍然是图像和文本。 .wrapper和navbar之间还有一个20px-ish的边距悬伸，但是在Plunker中不可能看到它。虽然我确实试图复制它。

Answer 1

Joansy 你好。

Manoj Kumar 是正确的，关于如何使用Bootstrap container和row。

这就是给你一个问题的原因。

看一下 Fiddle 我很快就进行了一些更改，以便使用您的代码解决您的问题看看两个代码之间的区别底部的滚动条现在也消失了。

更新了小提琴，图片上没有填充。

查看此 Fiddle ，看看这是否是您希望图像显示的方式。

Answer 2

Joansy，你需要纠正你对Twitter Bootstrap代码的不良做法。以下两项导致您正在谈论的mysterious margin

永远不要将容器嵌套在另一个容器内

From Docs

容器

Bootstrap需要一个包含元素来包装网站内容和   安置我们的网格系统。您可以选择使用两个容器中的一个   你的项目。需要注意的是，由于填充量较多，既不是容器   是可嵌套的。

将行包装在容器内，以避免在row上设置负边距以扩展元素。

Answer 3

你目前正在使用没有他的.col- *孩子的.row课程。在bootstrap中，<div class="row">有一个margin: 0 -15px来补偿cols的15px填充。如果需要使用行，则需要添加cols。如果您不需要，只需删除父div的类.row。

两种解决方案：

第一

 <div class="row">
  <div class="col-xs-12>
   YOUR NAVBAR CONTENT
  </div>
 </div>

第二

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

祝你好运！

删除神秘的20px边距 - Bootstrap 3.3.4

3 个答案:

第一

第二