我想弄清楚为什么 carousel-caption 不会显示在放大的 1920x1080 窗口中。如果窗口没有被炸毁,那么标题就可以正常显示。有问题的代码:
<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">
<img src="<?php echo get_bloginfo('template_directory');?>/img/banner-1.jpg" alt="Competitive Prices on Web Design, SEO, and Digital Marketing" />
<div class="carousel-caption">
<h3>Quality Web Design</h3>
<p>Simple and Elegant Web Design, Located in Rochester Hills, Michigan</p>
</div>
</div>
<div class="item">
<img src="<?php echo get_bloginfo('template_directory');?>/img/banner-3.jpg" alt="Get Your Business Online Today" />
<div class="carousel-caption">
<h3>Get Your Business Online Today!</h3>
<p> ... </p>
</div>
</div>
<div class="item">
<img src="<?php echo get_bloginfo('template_directory');?>/img/banner-2.jpg" alt="Drive Traffic to Your Site" />
<div class="carousel-caption">
<h3>SEO</h3>
<p>Proper search engine optimization may make or break your website's visibility!</p>
</div>
</div>
</div>
您可以在此处查看实际效果:http://foxpile.net/wordpress/
当我用主题之外的图像替换图像时(我使用了 http://placehold.it/1920x500 .. 一切似乎都正常工作)
我正在运行最新版本的 Wordpress 和 Bootstrap 3.2.0
最佳答案
当分辨率大于1280px
时,在.carousel-caption
中添加top: 46%;
。这将解决问题,尝试使用代码检查器检查 firebug等
在 bootstrap 中找到以下媒体查询,或者如果您要覆盖 Bootstrap CSS 而不是将其添加到覆盖的 css 文件中;
@media only screen and (min-width : 1200px) {
.carousel-caption
{
top: 46%;
}
}
在更大的分辨率下,向下移动的标题在顶部有更多的偏移量,并且由于容器溢出隐藏
而不会显示。我对大于 1200px
的分辨率做了什么,我减少了字幕顶部偏移量。这使得它甚至可以在 1920x1080p
上显示。
祝你好运!
关于html - Bootstrap 旋转木马标题不显示在全屏 1920 x 1080 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24867673/