展示图片和轮播标题答案

【问题标题】：Showcase Image and Carousel Caption展示图片和轮播标题
【发布时间】：2015-03-19 23:37:21
【问题描述】：

我在使用以下代码时遇到问题： HTML：

<body>
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand</a>
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About-Us</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact-Us</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Login</a></li>
        </ul>
    </div>
</nav>
</div>
<div class="showcase">
    <div class="col-xs-12 showcase-container">
        <img src="media/tumblr_kx21pqsQBo1qaj2pio1_1280.jpg" width="1500" class="col-xs-12 showcase-img alt=""/>"
        <div class="carousel-caption showcase-title"> 
            <h1> Welcome to the Site </h1>
        </div>
    </div>
</div>

CSS：

.navbar-default
{
margin-bottom: 0; 
}

.showcase-container {
padding-left: 0; 
padding-right: 0; 
}

.showcase-img {
padding-left: 0; 
padding-right: 0; 
}

.showcase-title {
margin: 0 auto; 
height: 320px; 
}

我的问题是，当我试图将轮播标题居中时，我将边距设置在底部，并且能够达到正确的效果。现在，当我调整页面大小时，文本会从屏幕上移出而不是调整大小。当我想设置不透明度的背景并且背景包括用于间距的边距时，另一个问题出现了。所有这一切都表明我做错了什么，但我不确定我应该如何重新构建我的代码。非常感谢任何帮助。

【问题讨论】：

你给我们的例子不足以重现这个问题。请提供所有使用的 JS 文件的链接，或者更好的是，给我们一个 jsFiddle 来使用。
在 JS 方面并没有什么特别之处。包含 jquery 和 bootstrap.min.js 的脚本标记。
您也没有向我们提供您图片的完整 URL。我们需要它来重现您的问题。
@JoshuaWhitley 41.media.tumblr.com/tumblr_kx21pqsQBo1qaj2pio1_1280.jpg
所以，我回答了下面的第一个问题，但我不明白第二个问题。你在哪个元素上设置背景？

标签： html css twitter-bootstrap carousel

【解决方案1】：

问题是.showcase-title 的高度设置为 320px，.showcase-title 设置为绝对定位到图像容器的底部。当您调整浏览器大小时，图像会变小，但 .showcase-title 不会。将.showcase-title 的高度设置为 100%，它应该可以解决问题。

【讨论】：

这对解决我的问题大有帮助。从那以后，我对代码进行了大量修改，因此上述内容不再适用。将来，我会尝试更改我的代码，使其更容易放置在 codepen 或 jsfiddle 区域中。