1
私はこれに関する過去のSOの投稿を調べていましたが、どれも私を助けませんでした。私の問題は、キャプションが表示されなくなったところまでプッシュされていることです。これは、私の画像のサイズが異なることが原因です。 どのようなサイズの画像を使用していても、各スライドのカルーセルの中心（固定位置）にキャプションが表示されるようにするにはどうすればよいですか？ブートストラップの回転台のキャプションを再配置する
は、ここで私がこれまで持っているものだ。私が試した何http://www.bootply.com/KcWhRKSTxi
：キャプションのためのマージン下を試すために言及した前のSOの記事。私はキャプションを押し上げるためにマージン・ボトムを試してみましたが、2つの問題があります：（1）これは応答しません&（2）キャプションの中には他よりも低いものがあります。私のbootplyリンクを調べると、画像が最小の（垂直に話している）ため、2番目のスライダのキャプションが見えます。言い換えれば、マージンボトムを使用しても、一部のキャプションは他のキャプションよりも上/下になります。現在の実装では、画像1または3のキャプションは3つのドット（画像セレクタ）の下にプッシュされているため、キャプションは表示されません。ここで
は私のコードです：
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active peopleCarouselImg">
<img class="peopleCarouselImg" src="https://images.unsplash.com/photo-1440637475816-2e8bf1d4b6f3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=9000dbcc94e0bad6c5005dc1d867b105">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img class="peopleCarouselImg" src="https://images.unsplash.com/photo-1446645681877-acde17e336a9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=d8507a72935161039a62fbd8bba41283">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img class="peopleCarouselImg" src="https://images.unsplash.com/photo-1443808709349-353c8b390400?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ae16ad1553fa2305bdab4a73f583a725">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
.carousel {
max-height: 600px;
overflow: hidden;
}
.item img {
min-width: 100%;
height: auto;
}
.carousel-caption {
margin-bottom: 100px;
}