如何解决CSS对给定组件的反应问题
我有一个html模板,我将它们分为几个部分 设置样式,使我在下一文件夹中使用带有静态文件夹的静态文件,但是在某些组件中,我的类无法正常工作,因为如果动画部分无法正常工作,我想知道要怎么做才能使其正常工作代码如下:
我的CSS:
.categories__item {
height: 270px;
position: relative;
}
.categories__item h5 {
position: absolute;
left: 0;
width: 100%;
padding: 0 20px;
bottom: 20px;
text-align: center;
}
.categories__item h5 a {
font-size: 18px;
color: #1c1c1c;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
padding: 12px 0 10px;
background: #ffffff;
display: block;
}
.categories__slider .col-lg-3 {
max-width: 100%;
}
.categories__slider .owl-carousel .owl-nav button {
font-size: 18px;
color: #1c1c1c;
height: 70px;
width: 30px;
line-height: 70px;
text-align: center;
border: 1px solid #ebebeb;
position: absolute;
left: -35px;
top: 50%;
transform: translateY(-35px);
-webkit-transform: translateY(-35px);
background: #ffffff;
}
.categories__slider.owl-carousel .owl-nav button.owl-next {
left: auto;
right: -35px;
}
我的组件:
import React from 'react';
const Categories = ({ currentUser }) => {
return (
<section className="categories">
<div className="container">
<div className="row">
<div className="categories__slider owl-carousel">
<div className="col-lg-3 item">
<div className="categories__item set-bg" data-setbg="/static/img/categories/cat-1.jpg">
<h5><a href="#">Fresh Fruit</a></h5>
</div>
</div>
<div className="col-lg-3 item">
<div className="categories__item set-bg" data-setbg="/static/img/categories/cat-2.jpg">
<h5><a href="#">Dried Fruit</a></h5>
</div>
</div>
<div className="col-lg-3 item">
<div className="categories__item set-bg" data-setbg="/static/img/categories/cat-3.jpg">
<h5><a href="#">Vegetables</a></h5>
</div>
</div>
<div className="col-lg-3 item">
<div className="categories__item set-bg" data-setbg="/static/img/categories/cat-4.jpg">
<h5><a href="#">drink fruits</a></h5>
</div>
</div>
<div className="col-lg-3 item">
<div className="categories__item set-bg" data-setbg="/static/img/categories/cat-5.jpg">
<h5><a href="#">drink fruits</a></h5>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
export default Categories;
我相信这是因为-webkit-transform:translateY(-35px); 不起作用,因为它发生在React中?以及如何使此CSS属性起作用。
如果还有其他原因,我不知道它可以做什么,因为其他组件正常工作,并且当我移除.owl-carousel时,组件发生了变化,混乱情况更加混乱了,有人可以帮助我
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。