如何将标题置于Bootstap4基本滑块下方

时间：2017-11-30 06:30:34

标签： html css html5 css3 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">
            <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

（Sory，我的声誉不足以发布图片。）

然后我改变溢出：＆＃34;隐藏＆＃34;到＆＃34;可见＆＃34;在.carousel-inner。现在它工作，但它显示2个图像，而改变这样的图像

  

https://ibb.co/dd7v9b



那么如何在此问题中定位标题？

2 个答案:

答案 0 :(得分：1)

请参阅使用以下代码的css，运行代码段并检查结果。

＆＃13;
＆＃13; 
.carousel-inner{position:relative; width:100%; overflow:hidden}
.newcaption{position:absolute; bottom:5px; top:auto; color:#000; left:5px}
.newcaption p{ margin:0px}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

＆＃13;
＆＃13; 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></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="Second 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="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>
<style>
.carousel-inner{position:relative; width:100%; overflow:hidden;}
.newcaption{position:absolute; bottom:2px; top:auto; color:#000; left:5px;}
.newcaption p{ margin:0px; }
</style>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题