Yeniden konumlandırma Bootstrap Atlıkarınca Başlığı

Bu konuyla ilgili bazı SO gönderilerini inceledim, ancak bunların hiçbiri bana yardım etmedi. Benim sorunum, altyazımın artık görünmediği noktaya itiliyor olmasıdır. Bu, resimlerimin değişen boyutlarından kaynaklanıyor olabilir. Altyazıların, kullandığım boyuttaki resme bakılmaksızın her bir slayt için karuselin merkezde (sabit bir konumda) görünmesini nasıl sağlayabilirim?Yeniden konumlandırma Bootstrap Atlıkarınca Başlığı

İşte ben bugüne kadar ne var: denedim ne http://www.bootply.com/KcWhRKSTxi

: başlıklar için margin-bottom denemek için belirtilen Önceki SO mesajlar. Altyazılarımı altyazılarla oynatmaya çalıştım, ancak 2 sorun var: (1) Bu yanıt vermiyor & (2) Bazı altyazılar diğerlerinden daha düşük. Önyükleme bağlantımı incelerseniz, ikinci kaydırma çubuğundaki resim yazısı görünür çünkü görüntü en küçüktür (dikey olarak konuşuyor). Diğer bir deyişle, kenar boşluğu kullanmış olsam bile, bazı altyazılar diğerlerinden daha yüksek/düşük olacaktır. Mevcut uygulamamda, 1 veya 3 numaralı resimdeki altyazıları görmeyeceksiniz çünkü 3 noktadan (resim seçiciler) aşağı itiliyorlar. İşte

benim kodudur: bir maks-height sizin .carousel-inner>.item verirsek

<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; 
}

kaynak

2016-04-13 Joffrey Baratheon

, o zaman dikey olarak üst kullanarak carousel-caption içeriği hizalamak ve css fonksiyonlarını dönüştürebilecek:

carousel-inner>.item { 
    position: relative; 
    max-height: 600px; 
} 
.carousel-caption 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}

Örnek: http://www.bootply.com/H08K4Hxk3C

kaynak

2016-04-13 09:05:11

Yeniden konumlandırma Bootstrap Atlıkarınca Başlığı

cevap

İlgili konular