我试图将我的旋转木马标题放在顶部,但它不起作用

时间:2016-06-06 01:05:39

标签: html css twitter-bootstrap carousel caption

我正试图将我的旋转木马标题放在顶部,但它不起作用,我也希望背景有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%;
}

2 个答案:

答案 0 :(得分:0)

设置.carousel-caption的样式。要在顶部使用文本

.carousel-caption {
    top: 0;
    bottom: auto;
}

<div class="carousel-caption">
    <h4>Caption goes here</h4> 
</div>

您的h4应该覆盖父母的整个宽度,还是有特定的行为?

答案 1 :(得分:0)

对于旋转木马标题顶部,

您可以使用margin-top

来使用最大尺寸
.carousel-caption {
    margin-top: -2em;
}

或者您可以使用

.carousel-caption {
        top: 0;
    }