问题描述
您好,我在将元素集中在移动设备上时遇到了问题。 网站:https://dachsteinkaffee.myshopify.com/
我已将元素 margin-right
的 col-12 col-md-6 col-lg-4
设置为 0px
,但看起来边距仍在出现。
尝试将 text-align:center 应用于类 .img-Box。但它没有帮助。
我尝试过类似这样的不同选项,但都不起作用:
@media (max-width: 991px) {
#home-spotlight-1541414200176 .container-fluid .spotlight-3-blocks {
text-align: center;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row spotlight-3-blocks">
<div class="col-12 col-md-6 col-lg-4">
<div class="spotlight-item">
<div class="img-Box">
<a href="" class="animate-scale">
<img
data-src="//cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
src="https://cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
alt="Dachsteinkaffee"
itemprop="logo"
class="lazyautosizes lazyloaded"
data-sizes="auto"
sizes="370px"
/>
</a>
</div>
<div class="content spotlight-inner">
<h3 class="title"><span> MORGENGRUSS </span></h3>
<p class="des"><span> Der Filterkaffee eignet sich nicht nur für Frühaufsteher... </span></p>
<a href="" class="spotlight-button btn"> <span> ZUM KAFFEE </span> </a>
</div>
</div>
</div>
</div>
知道如何解决这个问题吗?
解决方法
首先,在您这里的演示代码中,没有 #home-spotlight-1541414200176 .container fluid
所以它在这里不起作用。
然后此边距会自动生成以填充空白,因为您的图像不够大,无法覆盖整个空间。
只需将 text-align:center
应用到您的类 .img-box
:
演示:
@media (max-width: 991px) {
.img-box {
text-align: center;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row spotlight-3-blocks">
<div class="col-12 col-md-6 col-lg-4">
<div class="spotlight-item">
<div class="img-box">
<a href="" class="animate-scale">
<img
data-src="//cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
src="https://cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
alt="Dachsteinkaffee"
itemprop="logo"
class="lazyautosizes lazyloaded"
data-sizes="auto"
sizes="370px"
/>
</a>
</div>
<div class="content spotlight-inner">
<h3 class="title"><span> MORGENGRUSS </span></h3>
<p class="des"><span> Der Filterkaffee eignet sich nicht nur für Frühaufsteher... </span></p>
<a href="" class="spotlight-button btn"> <span> ZUM KAFFEE </span> </a>
</div>
</div>
</div>
</div>
试试这个
#home-spotlight-1541414200176 .container-fluid
@media (max-width: 991px) {.spotlight-3-blocks {
text-align: center;
}}
<div class="row spotlight-3-blocks">
<div class="col-12 col-md-6 col-lg-4">
<div class="spotlight-item">
<div class="img-box">
<a href="" class="animate-scale">
<img
data-src="//cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
src="https://cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
alt="Dachsteinkaffee"
itemprop="logo"
class="lazyautosizes lazyloaded"
data-sizes="auto"
sizes="370px"
/>
</a>
</div>
<div class="content spotlight-inner">
<h3 class="title"><span> MORGENGRUSS </span></h3>
<p class="des"><span> Der Filterkaffee eignet sich nicht nur für Frühaufsteher... </span></p>
<a href="" class="spotlight-button btn"> <span> ZUM KAFFEE </span> </a>
</div>
</div>
</div>