Question

我有一个我认为属于Bootstrap框架的问题。每当我导入bootstrap时，看起来它使得两个相邻的div在它们之间有2个像素的边距，尽管元素检查器中没有任何内容表明可能导致这种情况。删除链接小提琴中的第一行会使间距消失。有人能告诉我是什么原因造成了这种间距吗？同样，我似乎无法弄清楚使用元素检查器导致这种情况的原因。我基本上看着红色和绿色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可以解决您的问题。它使用网格系统，您可以通过它来显示您的内容。 Gird系统包括桌面，平板电脑和移动网格系统。您可以使用12格col-md-12。或4格col-md-4或1格col-md-1。最好的事情是你不需要担心CSS。 Bootstrap负责处理它。您可以使用col-md-offset来使div彼此接近。 http://www.bootply.com/DCJ2m2Qitm全宽网格图案，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将$ command1 | command2 | MyCommand MyVariable ;和:before个伪元素添加到:after

的块中

box-sizing:border-box;

这样做是为了“更简单的大小选项和增强的网格系统”，并将div的宽度保持在指定的宽度，而不是像预期的那样在左侧和右侧添加额外的像素。

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

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

2 个答案: