Twitter-Bootstrap 3 - 僅在列之間的背景顏色

我在引導中的行內有三列。我想讓整行的背景顏色變成白色。當我這樣做時，該行的填充也會變爲白色背景，使該行看起來太寬。我希望顏色只在列後面，但也在它們之間。這就是爲什麼我將它應用到整行。Twitter-Bootstrap 3 - 僅在列之間的背景顏色

BOOTPLY EXAMPLE

正如你可以看到，Bootply例子 - 我想要的白色背景應用於之間的那些白色的div和空間（只之間！）他們。

當我將它應用到引導列時，它們的填充（第一列的左填充和最後一列的右填充）也被着色，使得該行看起來更寬。將其應用於該行也是同樣的故事。

有沒有辦法讓它看起來像我的意圖？

來源

2014-11-24 Pe-Ter

我已經找到了解決方案同樣的效果計算。您需要一個額外的行，它不在您當前的行和列中。然後，您將15px的填充添加到該最外面的行。這將使其內的所有內容具有白色背景，不會超出您所需的佈局。

HTML：

<div class="container"> 
    <div class="row outermost"> 
     <div class="col-xs-12"> 

      <!-- COLUMNS AND ROWS --> 

     </div> 
    </div> 
</div>

CSS：

.outermost { 
    padding-left:15px; 
    padding-right:15px; 
} 

.outermost > .col-xs-12 > .row { 
    background-color:white; 
}

來源

2014-11-27 13:34:40

這種利用邊界是一個與寬度達到你正在尋找 http://www.bootply.com/CVbu8QWsXq

來源

2014-11-24 01:59:36

所以，你說我應該擺脫引導的填充和應用的邊界？這與使用Bootstrap的RWD兼容嗎？這不會導致問題嗎？ – 2014-11-24 02:05:37

在示例代碼中，我沒有從任何引導元素中刪除填充，只是在.row上使用了15px的邊框（這會抵消此斷點上的15px負邊距），如果它變成並在較小的斷點處發出問題可以將其包裝在媒體查詢中，如 @media（min-width：992px）{ .row { background：#fff; border-left：15px綠色固體; border-right：15px green solid; } } – 2014-11-24 02:12:13

它不適合我。邊界背後也有白色。 – 2014-11-24 02:18:36

Twitter-Bootstrap 3 - 僅在列之間的背景顏色

回答

相關問題