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之間的兩個像素邊距

回答

相關問題