删除引导程序

时间:2016-01-28 10:32:15

标签: html css html5 css3 twitter-bootstrap-3

HTML

<div class="container-fluid">
  <div class="row">
    <div class="page-header header_site">
      <h1><font>ABC Company</font></h1>
    </div>
  </div>
</div>

CSS代码:

.header_site {
  background-color: darkblue;
}

font {
  color: white;
  margin: auto 160px auto 160px;
}

我想删除上边距,如下图所示。

enter image description here

6 个答案:

答案 0 :(得分:9)

给你的h1和页眉一个0的边距,并确保你的身体没有任何填充:

body { padding: 0; }
.page-header,
.page-header h1 {margin-top:0;}

Example bootply

如果您需要让h1向下移动一点,那就给它padding-top

答案 1 :(得分:6)

对于Bootstrap 3,只需添加class&#34; media-heading&#34;

<h1 class="media-heading"><font>ABC Company</font></h1>

答案 2 :(得分:0)

请添加以下 css 。默认情况下 HTML margin标记拥有自己的h1,这就是它发生的原因{{1} } margin-top:0;类。

.page-header h1

.page-header h1 { margin-top: 0; }
.header_site {
  background-color: darkblue;
}
font {
  color: white;
  margin: auto 160px auto 160px;
}
.page-header h1 {
  margin-top: 0;
}

答案 3 :(得分:0)

修改样式如下

.header_site {
  background-color: darkblue;
  margin:0;
  float:left;
  width:100%
}

答案 4 :(得分:0)

h3 {
  margin-top: revert !important;
  margin-bottom: revert !important;
}

将h3样式恢复为浏览器样式。 developer.mozilla.org说它不适用于Chrome,但我检查了一下,效果很好。

答案 5 :(得分:-1)

只需重写课程page-header并标记<h1>

.page-header {
  margin: 0 0 20px;
}
.page-header h1 {
  margin-top: 0;
}

jsfiddle-link