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; 
}

我的问题是，当我试图将旋转木马标题置于中心位置时，我会在底部设置边距，并且我能够达到正确的效果。现在，当我调整页面大小时，文本正在移出屏幕而不是调整大小。当我想要设置不透明度的背景并且背景包含用于间距的边距时，会出现另一个问题。所有这一切都是一个死的赠品，我做错了什么，但我不确定我应该如何重新构建我的代码。任何帮助都非常感谢。 Here's what I'm working on.

Answer 1

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

展示图像和旋转木马标题

1 个答案: