我在使用以下代码时遇到问题：
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;
}
我的问题是，当我尝试使轮播字幕居中时，将边距设置在底部，并且能够实现适当的效果。现在，当我调整页面大小时，文本从屏幕上移开并且没有调整大小。当我想设置不透明的背景并且背景包括用于间距的边距时，会出现另一个问题。所有这些都是我做错了什么的死法子，但是我不确定应该如何重组我的代码。任何帮助深表感谢。
最佳答案
问题是.showcase-title的高度设置为320px，而.showcase-title设置为绝对位于图像容器的底部。调整浏览器大小时，图像变小，但.showcase-title不会变小。将.showcase-title的高度设置为100％，它将解决此问题。