Bootstrap無邊距照片網格

我試圖在無邊距的Bootstrap中實現這樣的照片網格，而且這也必須是全寬度，我解決了通過把所有的容器流體和沒有天溝.. ，Bootstrap無邊距照片網格

但我不知道我在哪裏錯了。最大的問題實際上是更大的照片，我需要對齊它，沒有任何邊框或邊距，我試圖創建，就像你可以在 DEMO中看到的，另一個col-lg-6來獲得這個尺寸，而其他照片是col- LG-3。不知道有什麼問題

2016-01-05 Reve

您需要發佈您的代碼（簡化，成一個[mcve]）你的問題。外部鏈接可能因爲多種原因而變得不可用，使得問題不完整，無法回答 – ochi

鏈接希望這將有助於你

.img-responsive { 
display: block; 
max-width: 100%; 
height: auto; 
width: 100%; 
} 
.portfolio-box { 
position: relative; 
display: block; 
margin: 0 auto; 
max-width: 100%; 
}

Demo

來源

2016-01-05 19:37:35

謝謝，這就是它。現在只需做一些小的改動 – Reve

非常好，歡迎您:) –

修改核心Bootstrap類通常不是一個好主意。相反，創建你自己的班級。 – isherwood

這可能有幫助。首先，我將左側組合框與我可以用於特異性的課程分類。然後我說這個的CSS

.portfolio-box.left-side{ 
    height: 480px; 
    overflow: hidden; 
} 
.left-side > img{ 
    width:100% !important; 
}

這是額外類的HTML

<a href="#" class="portfolio-box left-side">

這裏是到DEMO

來源

2016-01-05 19:37:13 LOTUSMS

它的幫助，只是將高度更改爲520px，以證明其正確性。但現在我需要具有全角，並且在左圖和其他圖片之間沒有任何差距 – Reve

我施加負利潤率等於你的排水溝寬度網格列的兒童，以及匹配填充：

.gallery-image { 
    margin: -15px; 
    padding: 15px 0; 
} 

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-6"> 
     <div class="gallery-image"> 
     <div class="embed-responsive embed-responsive-4by3">

Demo

來源

2016-01-05 19:38:21 isherwood

Bootstrap無邊距照片網格

回答

相關問題