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

我有一个问题，我认为属于Bootstrap框架。每当我导入bootstrap时，它看起来像是让两个相邻的div在它们之间有一个2像素的边距，尽管元素检查器中没有任何内容表明可能导致这种情况。去除连接的小提琴中的第一行使间距消失。任何人都可以告诉我是什么导致了这种间距？再次，我似乎无法弄清楚使用元素检查器造成这种情况的原因。我基本上看着红色和绿色div之间的间距。我感谢您花时间帮助我。Bootstrap添加相邻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/

来源

2015-05-02 dps

如果您使用的引导。 Bootstrap为您的问题提供了解决方案。它使用一个网格系统，通过它可以显示你的内容。网格系统由桌面，平板电脑和移动网格系统组成。你可以使用12格col-md-12。或4格col-md-4或1格col-md-1。最好的事情是你不需要担心CSS。 Bootstrap照顾它。您可以使用col-md-offset使div彼此靠近。 http://www.bootply.com/DCJ2m2Qitm全格网格图案不能有空格格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>

来源

2015-05-02 21:58:12 shadab

谢谢您的回复。我了解引导网格系统，但是这些特殊的div实际上是为内容而非高层布局本身。我实际上希望div元素相互接触，例如，如果我想创建具有不同背景色的棋盘式图案。 – dps

我编辑了我的链接到bootply。让我知道如果这是你正在寻找或不。 – shadab

其实这就是我要找的。我很困惑，因为我认为偏移量是通过移动列来实际放置x列的“空间”，如此处所述。 http://getbootstrap.com/css/。我很惊讶这实际上是有效的（基于我所知道的，但乍看起来它看起来像）。我会做一些测试，如果这个工程我会通过贝宝给你10美元，并批准你的答案。感谢您的帮助。 – dps

只是为了告诉你什么是发生在你的代码中，自举v3开始，引导增加:before和:after伪元素，以块box-sizing:border-box;

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

这样做是为了“更容易上浆完成选项和增强的网格系统“，并将保持div的宽度在指定的宽度，而不是像预期的那样向左和右添加额外的像素。

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

来源

2015-05-02 23:00:44 Bosc

谢谢您添加到此答案user336572。我不得不承认，尽管我在学习CSS的时髦艺术方面取得了很大的进展，但在我之前和之后：对我而言，对我来说是一种技能类型。无论如何，我感谢您花时间帮助我。 – dps

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

回答

相关问题