Question

我正在尝试将两个标题直接写在彼此之上，两者之间没有空格，如下所示：

头1
HEADER2

header2的顶部应该几乎触及header1的底部。

我正在使用bootstrap，两个标头之间有很大的差距。我已经尝试重写课程以删除顶部和底部边距，但差距仍然存在。

我该怎么做？

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

css：

#row-top-margin{
margin-top: 0px;
}

#row-bottom-margin{
margin-bottom: 0px;
}

Answer 1

您需要重置标题的边距并对h2：

应用负边距

h1, h2 {
  margin: 0;
}

h2 {
  margin-top: -0.5em;
}

确保你的css在bootstrap css之后应用，以便覆盖样式。

示例：http://www.bootply.com/0Njb4PrXSi

修改：更新了代码示例（http://www.bootply.com/3HG9MmaROJ）

重新排列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>

并使用no-margin类来更改边距：

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

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

Answer 2

尝试给予-ve margin。

    <!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>

将两个标题直接放在彼此之下

2 个答案: