我试图将我的旋转木马标题放在顶部,但它不起作用
I'm trying to position my carousel caption on top but it's not working
我正在尝试将我的旋转木马标题放在顶部,但它不起作用,我还希望背景具有 100% 的宽度(我希望它填满它所在的整行,我不不希望它被限制为文本宽度大小)
这是我的 html 代码
<div class="carousel-caption">
<h4><span class="caption-style"> Caption goes here</span></h4>
</div>
这是我的 css 样式
.caption-style {
color: white !important;
background: rgba(0, 0, 0, 0.5);
display:block;
padding-top: 15px;
padding-bottom: 15px;
top: 0;
bottom: auto;
width:100%;
}
只需设置 .carousel-caption
的样式即可。要使文本位于顶部,请使用
.carousel-caption {
top: 0;
bottom: auto;
}
<div class="carousel-caption">
<h4>Caption goes here</h4>
</div>
您的 h4
应该覆盖父级的整个宽度,或者是否有您正在寻找的特定行为?
对于旋转木马字幕顶部,
您可以使用 margin-top
来使用您的最大尺寸
.carousel-caption {
margin-top: -2em;
}
或者您可以使用
.carousel-caption {
top: 0;
}
我正在尝试将我的旋转木马标题放在顶部,但它不起作用,我还希望背景具有 100% 的宽度(我希望它填满它所在的整行,我不不希望它被限制为文本宽度大小)
这是我的 html 代码
<div class="carousel-caption">
<h4><span class="caption-style"> Caption goes here</span></h4>
</div>
这是我的 css 样式
.caption-style {
color: white !important;
background: rgba(0, 0, 0, 0.5);
display:block;
padding-top: 15px;
padding-bottom: 15px;
top: 0;
bottom: auto;
width:100%;
}
只需设置 .carousel-caption
的样式即可。要使文本位于顶部,请使用
.carousel-caption {
top: 0;
bottom: auto;
}
<div class="carousel-caption">
<h4>Caption goes here</h4>
</div>
您的 h4
应该覆盖父级的整个宽度,或者是否有您正在寻找的特定行为?
对于旋转木马字幕顶部,
您可以使用 margin-top
来使用您的最大尺寸.carousel-caption {
margin-top: -2em;
}
或者您可以使用
.carousel-caption {
top: 0;
}