时间戳

首页 > 解决方案 > 如何使引导轮播控件显示在图像顶部而不是图像旁边？

css - 如何使引导轮播控件显示在图像顶部而不是图像旁边？

问题描述

我正在使用引导程序提供的轮播代码，虽然它正在工作，但控件占用了图像左右两侧的空间，而不是位于它们之上。

到目前为止，我是一个新手，我试图解决这个问题是添加

}
.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>

++更新：我尝试通过添加 position: absolute 和 top: 0 到 carousel-control 正如@Swati 所建议的那样将箭头定位在图像顶部，并检查元素表明这些规则被http:/覆盖/stockpath.bootstrapcdn.com/bootstrap/3.4.1/css/less/carousel.less:96和 mydomain.com/:30 这是什么意思？有办法解决吗？

标签： cssbootstrap-4carousel

解决方案

使用它来删除背景。

    .carousel-control.left {
        background-image: none!important;
    }
    .carousel-control.right {
        background-image: none!important;
    }

推荐阅读