引导转盘字幕在转换完成后移动 [英] Bootstrap Carousel Caption moves after transition complete
问题描述
我所做的是使用引导轮播创建网页。
问题是，当发生转换时，文本在一个高度。一旦该移动完成（在暂停序列期间）文本移动。如果你仔细观察（现在它移动约2px），可以看到一个例子 www.r3gamers.com 。 / p>
问题是，在我最近的编辑中，这已经变得更糟。它现在跳跃大约50px向下，我不知道如何保持高度相同，当它转换时。我可以通过填充和边距调整文本的高度，但这并不限制文本跳跃的量。
我相信这个问题是由裁剪图片大小造成的，但我不确定。
php代码
echo'< div id = carousel-example-genericclass =carousel slidedata-ride =carousel>
<！ - 指标 - >
< ol class =carousel-indicators>
< li data-target =＃carousel-example-genericdata-slide-to =0class =active>< / li>
for（$ i = 1; $ i <$ rows; $ i ++）{
echo'< li data-target =＃carousel-example-genericdata-slide-to = '。$ i。'>< / li>';
}
echo'< / ol>
<！ - 幻灯片包装 - >';
$ row2 = mysqli_fetch_array（$ r2，MYSQLI_ASSOC）;
echo< div class =carousel-innerrole =listbox>
< div class =item active>
< a href =Article.php？id ='。$ row2 ['ArticleID']。'>
< img class =cropped-top cropped-bottomsrc ='。$ row2 [BackgroundImage]。'>< / a>
< div class =carousel-caption>
< h3>'。$ row2 ['ArticleTitle']。'< / h3>
< h4>撰写者：。。$ row2 ['Username']。'< / h4>
< / div>
< / div>';
while（$ row2 = mysqli_fetch_array（$ r2，MYSQLI_ASSOC））{
echo'< div class =item>
< a href =Article.php？id ='。$ row2 ['ArticleID']。'>
< img class =shading cropped-top cropped-bottomsrc ='。$ row2 [BackgroundImage]。'>< / a>
< div class =carousel-caption>
< h3>'。$ row2 ['ArticleTitle']。'< / h3>
< h4>撰写者：。。$ row2 ['Username']。'< / h4>
< / div>
< / div>';
}
echo'< / div>
<！ - 控件 - >
< a class =left carousel-controlhref =＃carousel-example-genericrole =buttondata-slide =prev>
< span class =glyphicon glyphicon-chevron-leftaria-hidden =true>< / span>
< span class =sr-only>上一页< / span>
< / a>
< a class =right carousel-controlhref =＃carousel-example-genericrole =buttondata-slide =next>
< span class =glyphicon glyphicon-chevron-rightaria-hidden =true>< / span>
< span class =sr-only>下一页< / span>
< / a>
< / div>';
CSS
@media screen and（min-width：768px）
。carousel-caption {
right：20％;
left：20％;
padding-bottom：300px;
}
。carousel-caption {
position：absolute;
right：15％;
bottom：50px;
left：15％;
z-index：10;
padding-top：20px;
padding-bottom：300px;
color：#fff;
text-align：center;
text-shadow：0 1px 2px rgba（0，0，0，.6）;
}
除了这两个字段，我看不到任何css影响旋转木马，虽然我会添加它，如果有任何人可以想到的任何更多。
任何帮助为什么这种情况发生或如何解决它将会大。
交换值底部：-11％; .item.active 到 bottom：-10.7％; 如下所述：
/ * bootstrap.css中的第6058行* /
@media不全，（-webkit-transform-3d）
.carousel-inner> .item.next.left，.carousel-inner> .item.prev.right，.carousel-inner> .item.active {
left：0;
bottom：-10.7％; / * <=这个< = * /
的交换底值-webkit-transform：translate3d（0，0，0）;
transform：translate3d（0，0，0）;
}
What i've done is create a webpage using the bootstrap carousel.
The problem is that while the transition occurs the text is at one height. Once that movement is complete (during the pause sequence) that text moves. An example can be seen here www.r3gamers.com if you look closely (it moves about 2px right now).
The problem is, in my recent edits, this has got much worse. It now jumps about 50px downwards and i don't know how to keep the height the same as it is when it transitions. I can adjust the height of the text via padding and margins but this doesn't limit the amount the text jumps.
I believe the problem has been caused by cropping the image size, but i'm not certain.
The php code
echo'<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>';
for ($i = 1; $i < $rows; $i++){
echo'<li data-target="#carousel-example-generic" data-slide-to="'.$i.'"></li>';
}
echo'</ol>
<!-- Wrapper for slides -->';
$row2 = mysqli_fetch_array($r2, MYSQLI_ASSOC);
echo'<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="Article.php?id=' . $row2['ArticleID']. '">
<img class="cropped-top cropped-bottom" src="'.$row2["BackgroundImage"].'"></a>
<div class="carousel-caption">
<h3>'.$row2['ArticleTitle'].'</h3>
<h4>Written by '.$row2['Username'].'</h4>
</div>
</div>';
while ($row2 = mysqli_fetch_array($r2, MYSQLI_ASSOC)) {
echo'<div class="item">
<a href="Article.php?id=' . $row2['ArticleID']. '">
<img class="shading cropped-top cropped-bottom" src="'.$row2["BackgroundImage"].'"></a>
<div class="carousel-caption">
<h3>'.$row2['ArticleTitle'].'</h3>
<h4>Written by '.$row2['Username'].'</h4>
</div>
</div>';
}
echo'</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>';
The CSS
@media screen and (min-width: 768px)
.carousel-caption {
right: 20%;
left: 20%;
padding-bottom: 300px;
}
.carousel-caption {
position: absolute;
right: 15%;
bottom: 50px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 300px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
And other than those two fields, i can't see any css that would affect the carousel, although i'll add it if there is any more anybody can think of.
Any help as to why this is happening or how to fix it will be great.
Exchange the value bottom:-11%; of the class .item.active to bottom: -10.7%; as described below:
/* line 6058 in bootstrap.css */
@media not all, (-webkit-transform-3d)
.carousel-inner > .item.next.left, .carousel-inner > .item.prev.right, .carousel-inner > .item.active {
left: 0;
bottom: -10.7%; /* <= Exchange bottom value for this <= */
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
这篇关于引导转盘字幕在转换完成后移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
