展示图片和轮播标题

Question

我在使用以下代码时遇到问题： 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; 
}

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

Answer 1

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

展示图片和轮播标题

Showcase Image and Carousel Caption

html

css

carousel

twitter-bootstrap