css - 写在 Bootstrap 顶部面板行上？

Question

我想使用这样的 Bootstrap 实现外观:

如果您看到“Top Hit”、“Artists”和“Genres”这几行，我希望我可以像这样将它放在面板的顶行:

我想将“Top Hit”之类的文本放在面板的顶部。

谢谢，想不通，希望你们知道:-)

Answer 1

您将不得不利用负边距来实现这一点。

假设您的 HTML 为:

<div>

    <h1>Artists</h1>

</div>

那么你需要 CSS 作为:

div{
    height:100px;
    width:100px;
    border:2px solid black;
    margin-top:10px;
    text-align: center;
}

h1{
    width:50px;
    margin-top:-10px;
    margin-left:auto;
    margin-right: auto;
    background:white;
}

解释:在 div 中，将文本居中对齐。给h1的margin-top负值放置在的border-line的顶部分区。现在给 width 和 margin-left 和 margin-right 作为 auto，这将使标题居中。

参见 fiddle :“http://jsfiddle.net/kboutd9q/1/”

如截图所示: