web-dev-qa-db-fra.com

À propos de Bootstrap 4 - Navbar "Fixed top"

J'utilise Bootstrap 4,
J'ai une question à propos de Navbar "Fixed top". http://v4-alpha.getbootstrap.com/components/navbar/#placement
La barre de navigation "Fixed top" couvre le contenu, 

comme cette démo ci-dessous, 

la barre de navigation couvre <div class="jumbotron">, je veux que la barre de navigation ne la couvre pas, que dois-je faire? 

Je ne sais pas comment le faire, car la taille des appareils est visible. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=Edge">

    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
    </ul>
    <form class="form-inline pull-xs-right">
        <input class="form-control" type="text" placeholder="Search">
        <button class="btn btn-success-outline" type="submit">Search</button>
    </form>
</nav>
<div class="jumbotron">
    <h1 class="display-3">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <hr class="m-y-2">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </p>
</div>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.3.2/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>
htmlcsstwitter-bootstrap
15
zwl1619

Essayez d’utiliser sticky-top au lieu de fixed-top, cela a fonctionné pour moi sur Bootstrap 4 Alpha6.

23
Vlad

Vous pouvez utiliser la classe .sticky-top ou résoudre ce problème à l’aide de CSS personnalisé

body{
    padding-top: 70px;    
    z-index: 0;
}
0
Ali Metwally

Utilisation:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

comme indiqué ici sur w3schools.com

La version 4.0.0 de bootstrap css ne fonctionne pas correctement. J'ai eu le même problème et le remplacement par la version 3.3.7 l'a corrigé.

0
Viet

À mon avis, le meilleur moyen serait de définir une balise englobante sur le reste du contenu couvert et de définir l'attribut margin-top dans css dans vw ou vh ou pourcentages (selon votre cas d'utilisation) pour vous assurer qu'aucun contenu n'est masqué par la barre fixe en haut. Cela fera en sorte qu'il soit même redimensionnable sans changements significatifs dans l'effet de la barre de navigation sur la page bien que je suggère de changer la marge en fonction de la taille de la page en utilisant le contrôleur @media dans css.

Pour plus d’informations sur votre problème, vous pouvez consulter le fil de discussion suivant: Twitter bootstrap navbar fixé en haut du site qui se chevauche

0
BanelingRush

Vous pouvez résoudre ce problème avec css

<style>
  body {
     margin-top: 50px;
  }
</style>
0
Kld