Html 使两个标题直接位于彼此下方_Html_Css_Twitter Bootstrap

Html 使两个标题直接位于彼此下方

html css twitter-bootstrap

Html 使两个标题直接位于彼此下方,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正试图写两个标题，两个标题之间没有空格，就像这样：校长1 校长2 磁头2的顶部应几乎接触磁头1的底部我使用的是引导，两个标题之间有一个很大的间隙。我尝试过重写类以删除上下页边距，但差距仍然存在我该怎么做 <div class="row even"> <div class="col-md-12"> <h1 id="row-bottom-margin" class="text-center"> A Title </h1>

我正试图写两个标题，两个标题之间没有空格，就像这样：

校长1
校长2

磁头2的顶部应几乎接触磁头1的底部

我使用的是引导，两个标题之间有一个很大的间隙。我尝试过重写类以删除上下页边距，但差距仍然存在

我该怎么做

<div class="row even">
    <div class="col-md-12">
        <h1 id="row-bottom-margin" class="text-center"> A Title </h1>
            <div class="col-md-12">
                <h3 id="row-top-margin" class="text-center"> Title 2 </h3>
            </div>
    </div>
</div>

您需要重置页眉的边距，并将负边距应用于

h2

：

h1, h2 {
  margin: 0;
}

h2 {
  margin-top: -0.5em;
}

确保在引导css之后应用css，以便覆盖样式

例如：

编辑：更新了代码的示例（）

重新排列html，如下所示：

<div class="row even">
    <div class="no-margin col-md-12">
        <h1 class="text-center">A Title</h1>
        <h3 class="text-center">Title 2</h3>
    </div>
</div>

尝试给予-ve裕度

    <!DOCTYPE html>
<html>
<head>
<style>
#row-top-margin{
margin-top: 0px;
}

#row-bottom-margin{
margin-bottom: -10px;
}
</style>
</head>
<body>

<div class="row even">
    <div class="col-md-12">
        <h1 id="row-bottom-margin" class="text-center"> A Title </h1>
            <div class="col-md-12">
                <h3 id="row-top-margin" class="text-center"> Title 2 </h3>
            </div>
    </div>
</div>

</body>
</html>


#行顶边距{
边际上限：0px；
}
#行底边距{
边缘底部：-10px；
}
头衔
标题2

CSS在哪里，HTML在哪里？您使用什么CSS覆盖该类？CSS将需要比CSS引导用于覆盖它更高的特异性。在chrome开发工具中查看CSS在做什么提供您的代码！

.no-margin h1, .no-margin h3 {
    margin 0;
}

.no-margin h3 {
    margin: -0.75em;
}

    <!DOCTYPE html>
<html>
<head>
<style>
#row-top-margin{
margin-top: 0px;
}

#row-bottom-margin{
margin-bottom: -10px;
}
</style>
</head>
<body>

<div class="row even">
    <div class="col-md-12">
        <h1 id="row-bottom-margin" class="text-center"> A Title </h1>
            <div class="col-md-12">
                <h3 id="row-top-margin" class="text-center"> Title 2 </h3>
            </div>
    </div>
</div>

</body>
</html>