我正在尝试在页面的标题部分制作完整的高度和宽度 slider 。为此，我正在使用 Owl Carousel 和 Bootstrap 。一切正常，但我得到了一些我不想要的正确利润率。我确实重置了页面的边距和填充，但是当我使用 Owl Carousel 时，我得到了这个正确的边距。请帮助我如何摆脱这个 margin 。
这是代码。
HTML
<div class="header">
<div class="container-fluid">
<div class="row owl-carousel">
<div class="item d-flex flex-row">
<div class="left">hello</div>
<div class="right">world</div>
</div>
<div class="item d-flex flex-row">
<div class="left one">hello</div>
<div class="right two">world</div>
</div>
</div>
</div>
</div>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Roboto', sans-serif;
}
.left{
height:100vh;
width:30%;
background-color: red;
}
.right{
height:100vh;
width:70%;
background-color: green;
}
.one{
background-color: yellow;
}
.two{
background-color: orange;
}
JS
$('.owl-carousel').owlCarousel({
loop:true,
nav:false,
autoplay:true,
autoplayTimeout:4000,
items:1
});
最佳答案
您需要在 div.row 中添加新的 div:
工作示例:jsfiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="container-fluid">
<div class="row">
<div class="owl-carousel">
<div class="item d-flex flex-row">
<div class="left">hello</div>
<div class="right">world</div>
</div>
<div class="item d-flex flex-row">
<div class="left one">hello</div>
<div class="right two">world</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
关于html - Owl Carousel 中不需要的右边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57934008/