web-dev-qa-db-fra.com

Supprimer la marge supérieure de l'en-tête dans le bootstrap

HTML

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

Code CSS: 

.header_site {
  background-color: darkblue;
}

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

Je souhaite supprimer la marge supérieure indiquée dans la figure suivante.

 enter image description here

htmlcsshtml5css3twitter-bootstrap-3
6
Lalinda Sampath

donnez à votre en-tête h1 et page en haut de la marge 0 et assurez-vous que votre corps n'a pas de rembourrage:

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

Exemple bootply

Si vous avez besoin que votre h1 descende un peu, donnez-lui padding-top

9
Pete

Pour Bootstrap 3, ajoutez simplement la classe "media-heading"

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

Modifier le style comme ci-dessous 

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

Veuillez ajouter le code ci-dessous css . Par défaut,HTMLpossède sa propre variable margin pour h1 et c’est la raison pour laquelle elle se produit ajoute margin-top:0; dans la classe .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;
}
<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