html - 如何在 Bootstap4 基本 slider 下方放置标题

标签 html css captions

我需要在 Bootstap4 中的基本 slider 下方放置一个标题。
这是我的 HTML 代码

<div class="col-xs-12 col-sm-6 col-md-5" style="float:right; padding:0;">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="images/1.jpg" alt="First slide">
                <div class="newcaption">
                    <p>First caption</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/2.jpg" alt="Second slide">
                <div class="newcaption">
                    <p>Second caption</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/3.jpg" alt="Third slide">
                <div class="newcaption">
                    <p>Third caption</p>
                </div>
            </div>
        </div>


        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>  
</div>

首先,我的css是

.carousel-inner{position:relative; width:100%; overflow:hidden;}
.newcaption{position:absolute; bottom:-25px; top:auto; color:#000;}

然后变成这样

https://ibb.co/nG3rhw

(对不起,我的声誉不足以发布图片。)

然后我在 .carousel-inner 中将 overflow: "hidden"更改为 "visible"。现在它可以工作,但它显示 2 张图像,同时像这样更改图像

https://ibb.co/dd7v9b



那么如何在这个问题中放置标题?

最佳答案

查看 css 使用以下代码,运行代码片段并检查结果。

.carousel-inner{position:relative; width:100%; overflow:hidden}
.newcaption{position:absolute; bottom:5px; top:auto; color:#000; left:5px}
.newcaption p{ margin:0px}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-xs-12 col-sm-6 col-md-5" style="float:right; padding:0;">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="First slide">
                <div class="newcaption">
                    <p>First caption</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="First slide">
                <div class="newcaption">
                    <p>Second caption</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="First slide">
                <div class="newcaption">
                    <p>Third caption</p>
                </div>
            </div>
        </div>


        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>  
</div>

</body>
</html>

关于html - 如何在 Bootstap4 基本 slider 下方放置标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47567195/

相关文章:

java - Http header 设置问题

javascript - 创建水平菜单 Web 应用程序

html - 使 hta 窗口居中

javascript - 如何创建一个动态下拉选择元素,其选项计数根据某个 div 的子元素数量而变化?

html - 如何将 Logo 放在顶部,将页脚放在底部?

html - 使 bg 图像全宽并滚动以查看图像的其余部分

css - 通过悬停元素拉伸(stretch)时 Bootstrap 列从行对齐中消失

android - Android 和 iOS 的 Jwplayer 字幕兼容性

api - 何时将字幕支持添加到 YouTube 数据 API V3

javascript - 使用 Javascript,如何为我的每个灯箱图库图像制作单独的标题?