Bootstrap 在相邻 div 之间添加两个像素的边距

Question

我有一个我认为与 Bootstrap 框架有关的问题。每当我导入 bootstrap 时，看起来它会使两个相邻的 div 之间有 2 像素的边距，尽管元素检查器中没有任何内容表明可能导致这种情况的原因。删除链接 fiddle 中的第一行会使间距消失。谁能告诉我是什么导致了这种间距？同样，我似乎无法通过使用元素检查器找出导致此问题的原因。我基本上是在看红色和绿色 div 之间的间距。感谢您抽出时间帮助我。

HTML

<div class="row"><div id="wrapper">
  <div id="first">DIV1 DIV1</div>
  <div id="second">DIV 2 DIV 2</div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: auto;
}
#first {
  float: left;
  width: 300px;
  border: 1px solid red; 
}
#second {
  border: 1px solid green;
  margin: 0 0 0 302px;
}

http://jsfiddle.net/dsulli99/ngapjysq/

Answer 1

如果您使用的是 bootstrap。 Bootstrap 有解决您问题的方法。它使用网格系统，您可以通过它显示您的内容。网格系统包括桌面、平板和移动网格系统。您可以使用 12 格 col-md-12。或 4 格 col-md-4 或 1 格 col-md-1。最好的一点是您无需担心 CSS。 Bootstrap 处理它。您可以使用 col-md-offset 使 div 彼此靠近。 http://www.bootply.com/DCJ2m2Qitm full width grid pattern without space between div http://www.bootply.com/KImM5xvufe

试试这个代码。

<div col-md-5>
  <p>This is First Gird</p>
</div>
 <div col-md-5>
  <p>This is Second Gird</p>
</div>

Answer 2

只是为了通知您您的代码发生了什么，从 bootstrap v3 开始，bootstrap 将 :before 和 :after 伪元素添加到 box-sizing:border-box;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

这是为 "easier sizing options and an enhanced grid system" 完成的，将使您的 div 的宽度保持在指定的宽度，而不是像您预期的那样在左右两侧添加额外的像素。

https://css-tricks.com/box-sizing/

Bootstrap 在相邻 div 之间添加两个像素的边距

Bootstrap adding what appears to be a two pixel margin between adjacent divs

css

twitter-bootstrap-3