邊框和背景填充邊緣內，使用Bootstrap列

-2

我使用Bootstrap的網格系統重複行/列設置。我想在這些元素之間創建填充，但是它們的邊框和背景都位於該填充內。我曾嘗試使用保證金，但在列級別上使用Bootstrap的網格佈局插孔。邊框和背景填充邊緣內，使用Bootstrap列

下面是我正在處理的一個非常精細的版本，它說明了這一點。我想修改這個，使藍色邊框擁抱白色的內框，而你沒有看到任何紅色（在我的情況下，它會顯示在文本後面）。我需要做到這一點，而不必修改已有的基本html佈局，只依靠CSS。

爲了澄清我正在追求什麼......我想在行&列之間添加填充。如果我只是直接向外部div添加填充（如下所示），則邊框和背景顏色將擴展到該填充之外。我希望邊框和背景顏色存在於我添加的填充邊界內。

我已經嘗試過使用各種盒子大小設置無濟於事，以及所有我可以想到的填充/邊距的方式。

的jsfiddle：https://jsfiddle.net/2v94yg2s/

HTML

<div class="container-fluid"> 
    <div class="grid-data row"> 
     <div class="col-md-4"><div></div></div> 
     <div class="col-md-4"><div></div></div> 
     <div class="col-md-4"><div></div></div> 
     <div class="col-md-4"><div></div></div> 
     <div class="col-md-4"><div></div></div> 
     <div class="col-md-4"><div></div></div> 
     <div class="col-md-4"><div></div></div> 
    </div> 
</div>

CSS

.grid-data { 
    padding: 15px; 
} 

.grid-data > div { 
    padding: 15px; 
    height: 50px; 
    border: 1px solid blue; 
    background-color: red; 
} 

.grid-data > div > div { 
    background-color: white; 
    height: 100%; 
    width: 100%; 
}

來源

2016-02-14 Joshua Ohana

等等，所以你想要藍色邊框覆蓋紅色部分？然後有紅色背景是什麼意思？你能澄清一下嗎？ – user1301428

@ user1301428我添加了一個說明段落 –

您是否嘗試過使用'box-sizing：border-box;'？這將使邊界**在div內而不是在他們之外出現（默認） – user1301428

結束將重複的內容包裹在另一個div內，並且只保留外部的填充。

來源

2016-02-18 12:30:00

，你基本上要的是改變電網的「陰溝」。

如果您希望在全球範圍內更改您的網站，簡單的解決方案是更改Bootstrap的「variables.less」文件中的@ grid-gutter-width變量並重建您的CSS。

如果你想要一個特定的功能，我建議不要使用你的網格。生成具有增加排水溝的替代網格可能有點矯枉過正，所以你可以推出自己的CSS。如果您不試圖在Bootstrap網格中混用Flexbox，Flexbox可能非常有用並且非常成功。

來源

2016-02-14 20:59:18 Webberig

感謝@Webberig的回覆，由於一大堆廢話（我正在開發另一個開發人員構建的巨大應用程序，只處理幾頁，並處理了一堆東西到處），我不能這樣做。必須有一種方法來指示邊框和背景進入填充內部，而不採用這種激烈的措施，也不必修改html結構。 –

只需向包含元素添加一個額外的類，並且您可以覆蓋所有默認網格樣式。沒有必要重組，但這是一個維護噩夢。爲多列組件編寫自己的CSS幾乎沒有太大的意義...... – Webberig

邊框和背景填充邊緣內，使用Bootstrap列

回答

相關問題