Question

我试图弄清楚为什么旋转木马字幕不会在一个爆炸的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

Answer 1

top: 46%;添加.carousel-caption，而分辨率大于1280px。这将解决问题，尝试使用firebug等代码检查器进行检查。

在bootstrap中查找以下媒体查询，或者如果您在Bootstrap CSS中覆盖，则将其添加到覆盖css文件中;

@media only screen and (min-width : 1200px) {
  .carousel-caption
  {
    top: 46%;
  }
}

在较大分辨率标题上向下移动病房在顶部有更多偏移，并且由于容器overflow hidden而未显示。我在大于1200px的分辨率上做了什么我减少了标题顶部偏移量。这使它在1920x1080p上显示。

祝你好运！

Answer 2

主题附带的图片尺寸为1920x650，而旋转木马则明确指定max-height

.carousel-inner {
    width: 100%;
    max-height: 500px !important;
}

使用占位符图像会导致图像变小，从而显示直到有更宽屏幕的人到达。

解决方案是：

允许横幅增长超过500px（通过移除此最大高度）
使用高度小于或等于500像素的图片，但在这种情况下您需要在更大的屏幕上定义他们的行为
将标题的位置更改为相对于轮播，而不是项目

Answer 3

即使这是一个相对较旧的帖子，这对某些人也有帮助。您也可以将固定高度值添加到.item div：

<强> PenCode 1

.carousel-inner .item {
  height: 400px;  /* add this */
}

如果您将图片添加为.item div而不是图片的背景图片，并将background-size:cover;添加到.item CSS，则此方法有另一个好处，您将获得响应式图像无需处理小屏幕的图像高度。

<强> CodePen 2

_{*调整两个笔的大小并查看差异高度}

Bootstrap轮播标题不会出现在全屏1920 x 1080中？

3 个答案: