Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/69.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何在Bootstap4基本滑块下方放置标题_Html_Css_Captions - Fatal编程技术网

Html 如何在Bootstap4基本滑块下方放置标题

Html 如何在Bootstap4基本滑块下方放置标题,html,css,captions,Html,Css,Captions,我需要在Bootstap4中的基本滑块下面放置一个标题。 这是我的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">

我需要在Bootstap4中的基本滑块下面放置一个标题。 这是我的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>
然后就变成这样了

对不起,我的名声不足以发布图片。 然后我将溢出更改为:在.carousel-inner中隐藏为可见。现在它的工作,但它显示2个图像,而改变像这样的图像

那么,如何在本期中定位标题?

无标题文件 第一个标题

第二个标题

第三题

.carousel内部{位置:相对;宽度:100%;溢出:隐藏;} .newcaption{位置:绝对;底部:2px;顶部:自动;颜色:000;左侧:5px;} .newcaption p{margin:0px;}
请参阅css使用以下代码,运行代码段并检查结果

.carousel内部{位置:相对;宽度:100%;溢出:隐藏} .newcaption{位置:绝对;底部:5px;顶部:自动;颜色:000;左侧:5px} .newcaption p{margin:0px} 第一个标题

第二个标题

第三题


你可以共享一个JSFIDLE或codepen链接吗?如果你想定位在旋转木马图像的正上方,然后进行更改,这会很有帮助。新标题{位置:绝对;底部:0;顶部:自动;颜色:000;}否则,如果你不想在旋转木马上显示它,但在它下面,你必须在旋转木马外管理它。根据当前幻灯片显示标题“请添加带完整脚本的JSFIDLE。它仍然无法显示超出图像边界的标题。”。
.carousel-inner{position:relative; width:100%; overflow:hidden;}
.newcaption{position:absolute; bottom:-25px; top:auto; color:#000;}