Aujourd’hui, je souhaite partager avec vous quelques conseils rapides à avoir sous la main en cas de besoin changez cela Barre de navigation Bootstrap Hauteur.

Bootstrap 4

1. Utiliser les classes utilitaires – c’est simple et rapide

Bootstrap 4 est livré avec un certain nombre d’excellentes classes d’utilitaires conçues principalement pour définir rapidement l’espacement, la couleur ou l’arrière-plan directement dans HTML, sans avoir besoin de toucher CSS. Pour modifier rapidement l’espacement sur votre barre de navigation, ajoutez une classe de remplissage à votre classe <nav class="navbar"></nav>.

Exemples:

  • Pour augmenter légèrement la hauteur de la barre de navigation: Ajouter py-3 Classe aussi
  • Pour augmenter un peu la hauteur: Ajouter py-5 Classez dans votre barre de navigation
  • Pour diminuer la hauteur de la barre de navigation: Ajouter py-0 Classez dans votre barre de navigation
  • Conseil: vous pouvez combiner plusieurs classes pour des fenêtres individuelles: par exemple., py-3 py-lg-5 Les classes rendent votre barre de navigation plus étroite sur mobile et plus grande sur les ordinateurs portables et de bureau

2. Définissez une hauteur fixe

Par exemple, si vous devez ajuster la hauteur de votre barre de navigation à un nombre exact, vous pouvez créer une classe CSS personnalisée. <nav class="navbar navbar-custom"></nav> et réglez la hauteur souhaitée. La barre de navigation étant constituée de flexbox, tout doit être bien aligné.

.navbar-custom {
  height: 100px;
}

3. Définition de la population de la barre de navigation dans SCSS

Si vous travaillez avec des sources d’amorçage SCSS dans votre projet, vous pouvez spécifier le remplissage vertical souhaité de la barre de navigation dans votre propre fichier variables.scss (recommandé) ou directement dans bootstrap / _variables.scss.

$navbar-padding-y: 20px;

Bootstrap 3

Il y a plus de méthodes mais je veux vous parler de ces deux:

4. Modifiez la hauteur de la barre de navigation en écrasant les définitions CSS Bootstrap

Si vous travaillez avec des fichiers CSS, c’est ma méthode préférée. Vous n’éditerez pas les fichiers CSS Bootstrap ou le thème CSS Bootstrap, mais écraserez le paramètre dans votre propre fichier. dans le mes thèmesJe fournis un fichier custom.css pour des changements comme celui-ci.

Un grand avantage de cette approche est que lorsque vous publiez une nouvelle version de Bootstrap ou de votre thème, vous écrasez uniquement les fichiers de votre site Web, mais vos modifications resteront intactes.

Supposons que vous souhaitiez modifier la hauteur de la barre de navigation en 80 px. Tout ce que vous avez à faire est d’ajouter ces quelques lignes dans votre fichier custom.css.

Laissez-moi vous expliquer brièvement:

  • Vous devez définir la hauteur ou la hauteur minimale de certains éléments: .navbar, .navbar-brand
  • Changez la bordure ci-dessus pour cela .navbar-toggle Bouton qui apparaît dans la barre de navigation réduite. Cela doit être calculé mais devrait être facile à faire. Une formule est incluse dans le code.
  • Modifiez le haut du remplissage et le bas du remplissage et définissez la hauteur de ligne pour les liens de barre de navigation non réduits. Les valeurs de remplissage doivent être recalculées comme vous pouvez le voir dans le code ci-dessous.
 .navbar {
  min-height: 80px;
}

.navbar-brand {
  padding: 0 15px;
  height: 80px;
  line-height: 80px;
}

.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar-nav > li > a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}

Jetez un œil au résultat et expérimentez un peu avec vous-même Codepen.

5. Modifiez la hauteur de la barre de navigation en modifiant les fichiers d’amorçage {LESS}

Si vous travaillez avec des fichiers Bootstrap {LESS}, recherchez le fichier variables.less et recherchez une ligne avec un contenu similaire:

@navbar-height: 50px;

Modifiez maintenant la valeur d’origine par la valeur souhaitée et compilez les fichiers {LESS} en CSS.

L’une ou l’autre de ces approches devrait suffire à changer votre CSS bootstrap et à changer la hauteur de votre barre de navigation. Si vous avez aimé l’article, merci de nous le faire savoir 🙂



Source link

Recent Posts