wake-up-neo.net

Entfernen Sie den oberen Rand der Kopfleiste in Bootstrap

HTML

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

CSS-Code: 

.header_site {
  background-color: darkblue;
}

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

Ich möchte den oberen Rand entfernen, wie in der folgenden Abbildung markiert.

 enter image description here

6
Lalinda Sampath

geben Sie Ihrem h1- und Page-Header einen oberen Rand von 0 und stellen Sie sicher, dass Ihr Körper keine Polsterung hat:

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

Beispiel bootply

Wenn Sie Ihren h1 etwas nach unten bewegen möchten, geben Sie ihm padding-top

9
Pete

Für Bootstrap 3 fügen Sie einfach die Klasse "Medienüberschrift" hinzu.

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

Ändern Sie den Stil wie folgt 

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

Fügen Sie bitte das folgende css hinzu: In defaultHTMLhaben Sie eine eigene margin für h1-Tag. Deshalb fügen Sie margin-top:0; in der .page-header h1-Klasse hinzu.

.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;
}
<div class="container-fluid">
  <div class="row">
    <div class="page-header header_site">
      <h1><font>ABC Company</font></h1>
    </div>
  </div>
</div>

0
Chonchol Mahmud