个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
<!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 的新手，我正面临一个特殊问题。在我的案例中，旋转木马字幕将显示在左侧。那么在桌面模式下，我已经尝试过绝对定位并且显示效果很好。但是当我为移动设备做响应模式时，它显示得很奇怪。我已经为这些提供了屏幕截图。
所以我的问题是我是否必须为位置和字体编写媒体查询，或者 Bootstrap 会处理它。任何人都可以在这方面指导我，或者至少展示一个片段如何响应所有屏幕尺寸。这将是巨大的帮助。
最佳答案
当你使用 position: absolute您需要确保您的类(class)有一个父类(class)，并且它有属性 position relative 这就是 position absolute 工作的方式
关于html - Bootstrap Carousel Captions 文本没有响应且无法在左侧定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51482657/
24
4
0
我用 Slick 创建了一个垂直旋转木马。我对设计进行了一些更改，除了第一个元素在旋转木马的视野中之外，一切都按我想要的方式工作。一次有 4 个项目在我的轮播中可见，但是当第一个元素位于四个项目中的第
例如，此问题主要发生在用户使用速度较慢的互联网或移动设备时。但是，当轮播中的页面内容/图像没有被缓存时，有时也会在更高的速度上看到闪烁。 如果页面加载并呈现第一个元素，所有轮播“幻灯片”就像一个列表一
当 Owl Carousel 在隐藏元素中启动，然后通过触发器显示该元素时，轮播项目的宽度完全错误(直到窗口调整大小): Fiddle (点击红色链接，看到损坏的布局出现，然后调整窗口大小) 这个问题
在构建轮播时，我意识到猫头鹰添加了克隆的重复项。我的猫头鹰配置看起来像这样。我如何阻止这种情况发生。 owlDfe.owlCarousel({ loop: false,
我正在为一家房地产公司开发一个网站，但我在使用 Bootstrap 的 Carousel 控件时遇到了问题。 我的目标是在一行中包含三个不同的列，并且每列中有一个 Carousel。我让它工作，问题是
我需要让我的 bootstrap 3 carousel-caption 占据我的一半 carousel，让 caption background-color 有点透明，并在其中写入一些文本。 所以逻辑
我正在使用引导媒体 slider 轮播。但是，如果项目少于 4 个，它会重复项目。我想每次点击滑动一个项目。 在下面查看我的代码 查询 $(document).ready(function()
关闭。这个问题需要 details or clarity 。它目前不接受答案。 想改进这个问题？添加详细信息并通过 editing this post 澄清问题。 4年前关闭。 社区在 29 天前审查
似乎默认情况下，Owl Carousel 将代表每张幻灯片的点放在旋转木马下方，而不是底部的内部。我发现我可以给它们添加负边距，它们会进入旋转木马，但它们落后于它有效地使它们变得无用。我想不出让它们出
基于本页 codrops 的代码:Codrops article ，我想将产品 slider 添加到 Bootstrap 轮播中。 I have added a codepen here 这是使瓶子动
我使用 React Bootstrap 轮播。指示器按钮未正确对齐，尺寸也不对。有办法解决这个问题吗？ http://imgur.com/a/lhxMS
我很难弄清楚如何使用轮播，更具体地说是如何设置当前幻灯片。 这是文档 of the component 这是 fiddle Go First Go Second
Bootstrap 是否支持在 Carousel 中显示网格列或行而不是 carousel-item -s？这个想法是有一个复杂的网格列结构，它们可以像轮播元素一样相互交换。例如，如果我们有以下网格:
我正在使用 angular-ui bootstrap carousel 并想更改带有图像的左右导航链接。似乎在 tpl 中，它们被硬编码为 ‹ 和 › 有没有人对将这些更改为图像而不更改实际的 ang
React Slick 有没有办法在 Carousel 中包含 Carousel？ import Slider from "react-slick";
如何用新的替换/重建 owl 轮播 项目？ 描述 在许多情况下，例如当您从数据库中获取新数据时，您会在轮播中添加新数据，但在本示例中，我尝试用新数据替换所有项目。 $('.owl-carousel')
我在我的网站中实现了 Owl Carousel 2，我希望能够使用像这样提供的 Jumbpto 帮助程序跳转到特定幻灯片， $('.btnJump').click(function(){ $(
在轮播上开始拖动时，我无法在移动设备上滚动页面。因此，如果轮播占据了移动设备上的所有可见空间 - 向上/向下翻到页面会变得有点棘手...... 我如何禁用这种滚动的“拦截”？ 最佳答案 将此 CSS
我在使用 Twitter Bootstrap Carousel 插件上的 .carousel(number) 方法时遇到问题。不知何故我无法让它工作。轮播本身已启动并正在运行，.carousel('n
我知道之前有人问过这个问题，但是相关的帖子在方法上有所不同，而且 fiddle 的例子也被删除了.. 我的情况:我在这里下载了整个 Bootstrap 表单: http://getbootstrap.
我是一名优秀的程序员,十分优秀！