【发布时间】：2019-08-30 20:24:13
【问题描述】：
我正在使用 bootstrap 提供的轮播代码，虽然它可以正常工作，但控件会占用图像左右两侧的空间，而不是位于图像上方。
到目前为止，我是一个新手，我尝试解决这个问题是添加
}
.left carousel-control {
position: absolute;
}
.right carousel-control {
position: absolute;
}
但它并没有改变任何东西
这里是完整的代码，控件位于屏幕的侧面而不是图像的顶部：
<!DOCTYPE html>
<html>
<head>
<title>Caroussel test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/uxcore.css" rel="stylesheet">
<link href="css/customer-comp.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type='text/javascript'>
var fqdn = "N1NWVPWEB066.shr.prod.ams1.secureserver.net";
redirectToLogin = function() {
window.location.href = "https://" + fqdn + ":8443";
}
</script>
<style>
.wrapper {
position: relative;
}
.left.carousel-control {
position: absolute;
}
}
.right.carousel-control {
position: absolute;
}
</style>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1-rs.png" alt="..." class="img-responsive center-block">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="2-rs.png" alt="..." class="img-responsive center-block">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="3-rs.png" alt="..." class="img-responsive center-block">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" style="position: absolute">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
++更新：我尝试按照@Swati 的建议将 position: absolute 和 top: 0 添加到 carousel-control 来定位图像顶部的箭头，并检查元素显示这些规则被覆盖http://stockpath.bootstrapcdn.com/bootstrap/3.4.1/css/less/carousel.less:96 和 mydomain.com/:30 这是什么意思？有办法解决吗？
【问题讨论】：
-
你想要图片顶部的轮播导航吗？
-
@Manikandan2811 是的。相反，这就是它目前的样子：imgur.com/a/cegVeHq
-
codepen.io/wolfgang1983/pen/IeKbA 请试试这个代码..
-
@QuestionGenerator13 请包含所有重现问题的相关轮播代码。
-
我复制粘贴了您的确切代码，但由于某种原因，这就是我得到的：imgur.com/a/YkNVyd9 按钮没有任何作用，我也没有任何箭头。我猜我放错了js代码？对不起，我对此很陌生。我基本上只是把它放在文件末尾的正文中：
标签： css bootstrap-4 carousel