css - bootstrap 轮播控制响应

Question

我对响应式 View 有疑问。如何使左右箭头响应。下面附上响应设备的屏幕截图

网站 View

移动 View

.carousel-control span {
  position: absolute;
  top: 85%;
  color: #C21B17;
  z-index:999px;
  font-size:30px;
}

.carousel-control.left {
	margin-left: -40px;
	width:30px;
	height:60px;
	background:none;
}
.carousel-control.right {
	margin-right: -20px; 
	width:30px;
	height:60px;	
	background:none;
}

Answer 1

您可以将轮播控件设置为自动调整宽度和高度，或者使用百分比来确保它填充一定数量的页面。例如，假设您希望每个控件占据页面的 20%，并且高度无关紧要。然后执行以下操作。

.carousel-control.left {
    margin-left: -40px;
    width:20%;
    height: auto;
    background:none;
}
.carousel-control.right {
    margin-right: -20px; 
    width:20%;
    height: auto;   
    background:none;
}