gpt4 book ai didi

html - Bootstrap Carousel Captions 文本没有响应且无法在左侧定位

转载 作者:行者123 更新时间:2023-11-28 01:21:10 24 4
gpt4 key购买 nike

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<title>Hello, world!</title>
<style>

html,body{

position: relative;

    .carousel-caption {
position: absolute;
top:113px;
left:150px;
}

.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>


<div id="demo" class="carousel slide" data-ride="carousel">

<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
</ul>

<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">

<img src="./images/ibm commerce background.png" alt="" width="" height="">
<div class="carousel-caption">
<h3 class="text-left">LOREM / IPSUM</h3>
<h2 class="text-left">UNIVERSAL
<br>
LOREM
</h2>

<h3 class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</h3>
</div>

</div>
<div class="carousel-item">
<img src="./images/ibm commerce.png" alt="" width="" height="">
<div class="carousel-caption">
<h3 class="text-left">THE ALL NEW</h3>
<h2 class="text-left">LOREM
<br>
IPSUM
<br>
DOLOR v9</h2>
<h3 class="text-left">IS HERE !</h3>
<h3 class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
</div>
</div>
</div>

<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

我是 bootstrap 4 的新手,我正面临一个特殊问题。在我的案例中,旋转木马字幕将显示在左侧。那么在桌面模式下,我已经尝试过绝对定位并且显示效果很好。但是当我为移动设备做响应模式时,它显示得很奇怪。我已经为这些提供了屏幕截图。

enter image description here

所以我的问题是我是否必须为位置和字体编写媒体查询,或者 Bootstrap 会处理它。任何人都可以在这方面指导我,或者至少展示一个片段如何响应所有屏幕尺寸。这将是巨大的帮助。

最佳答案

当你使用 position: absolute您需要确保您的类(class)有一个父类(class),并且它有属性 position relative 这就是 position absolute 工作的方式

关于html - Bootstrap Carousel Captions 文本没有响应且无法在左侧定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51482657/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com