哈弗疊加使用引導程序和圖像網格

我要添加圖像疊加層當客戶懸停在一個圖像 - 盒。
圖像被實現爲背景圖像。
引導是給汽車利潤率至極讓我覆蓋比圖片
更大刪除填充並添加圖像框之間的空間保證金後的響應不起作用了
問題：如何我可以將彩色覆蓋圖添加到我的圖像框中，同時保持圖像之間的響應性和差距。如您所見：在更改屏幕大小後，圖像
框不適應col-xs-6。他們留在 4列。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 

 
.produkt-img { 
 
    padding-bottom: 133.33333%; 
 
    background-size: cover; 
 
} 
 

 
.produkt-1 { 
 
    background-image: url('http://placehold.it/600x800/fc0'); 
 
} 
 

 
.produkt-2 { 
 
    background-image: url('http://placehold.it/600x800/fc0'); 
 
} 
 

 
.produkt-3 { 
 
    background-image: url('http://placehold.it/600x800/fc0'); 
 
} 
 

 
.produkt-4 { 
 
    background-image: url('http://placehold.it/600x800/fc0'); 
 
} 
 
       
 
     
 
     
 
.produkt-box-overlay-text { 
 
    width: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 80%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
} 
 
     
 
     
 
.produkt-overlay:before{ 
 
    position: absolute; 
 
    content:" "; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    display: none; 
 
    z-index:0; 
 
} 
 

 
.produkt-overlay:hover:before{ 
 
    display: block; 
 
} 
 

 
.overlay-farbe:before { 
 
/* grauer overlay background-color: rgba(50, 50, 50, 0.05)*/ 
 
background-color: rgba(199, 87, 36, 0.1); 
 
} 
 
     
 
.col-sm-3, produkt-width { 
 
    padding: 0px; 
 
    margin: 0.5%; 
 
    width: 23.75%; 
 
     } 
 
       
 
     
 
.col-sm-3 extra-margin { 
 
    margin-left:1%; 
 
     }

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-sm-3 col-xs-6 produkt-width produkt-overlay overlay-farbe"> 
 
    <div class="produkt-img produkt-1"></div> 
 
    </div> 
 
    <div class="col-sm-3 col-xs-6 produkt-width produkt-overlay overlay-farbe"> 
 
    <div class="produkt-img produkt-2"></div> 
 
    </div> 
 
    <div class="col-sm-3 col-xs-6 produkt-width produkt-overlay overlay-farbe"> 
 
    <div class="produkt-img produkt-3"></div> 
 
    </div> 
 
    <div class="col-sm-3 col-xs-6 produkt-width produkt-overlay overlay-farbe"> 
 
    <div class="produkt-img produkt-4"></div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-13 PeterPilz

at your css - >。col-sm-3，produkt-width < - 你定義了寬度，這就是爲什麼col-xs-6不工作 –

由於您使用的背景圖片，而不是使用<img>你可以通過元素僞元素使用背景圖片使用您的覆蓋。將以下類.produkt-overlay和.overlay-farbe從列元素移到背景元素。如果你想簡化事物，你也可以將這些類的一些屬性合併到.produkt-img類中。

注意：我注意到你試着改變Bootstrap列的寬度並用margin來替換填充。進行這些更改時請小心。 Bootstrap做了他們所做的一切，並打算以某種方式工作。不知道Bootstrap的一些優點和缺點，在修改他們所做的事情時很容易誤入歧途。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.produkt-img { 
 
    position: relative; 
 
    padding-bottom: 133.33333%; 
 
    background-size: cover; 
 
} 
 

 
.produkt-1 { 
 
    background-image: url('http://placehold.it/600x800/fc0'); 
 
} 
 

 
.produkt-2 { 
 
    background-image: url('http://placehold.it/600x800/fc0'); 
 
} 
 

 
.produkt-3 { 
 
    background-image: url('http://placehold.it/600x800/fc0'); 
 
} 
 

 
.produkt-4 { 
 
    background-image: url('http://placehold.it/600x800/fc0'); 
 
} 
 

 
.produkt-overlay:before { 
 
    position: absolute; 
 
    content: " "; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: none; 
 
    z-index: 0; 
 
} 
 

 
.produkt-overlay:hover:before { 
 
    display: block; 
 
} 
 

 
.overlay-farbe:before { 
 
    background-color: rgba(199, 87, 36, 0.1); 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-sm-3 col-xs-6"> 
 
     <div class="produkt-img produkt-overlay overlay-farbe produkt-1"></div> 
 
    </div> 
 
    <div class="col-sm-3 col-xs-6"> 
 
     <div class="produkt-img produkt-overlay overlay-farbe produkt-2"></div> 
 
    </div> 
 
    <div class="col-sm-3 col-xs-6"> 
 
     <div class="produkt-img produkt-overlay overlay-farbe produkt-3"></div> 
 
    </div> 
 
    <div class="col-sm-3 col-xs-6"> 
 
     <div class="produkt-img produkt-overlay overlay-farbe produkt-4"></div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-13 15:33:31 hungerstar

響應性，因爲無效的CSS的破：

.col-sm-3, produkt-width 
.col-sm-3 extra-margin

在這裏被修正的CSS用於覆蓋（附着僅改變行）：

.produkt-overlay:before{ 
    left: 15px; /*gutter width*/ 
    width: calc(100% - 30px); /*gutter width multiplied by 2*/ 
}

The complete example

來源

2017-04-13 15:34:25 Morpheus

哈弗疊加使用引導程序和圖像網格

回答

相關問題