web-dev-qa-db-fra.com

Bootstrap navbar chevauchant le contenu du corps

J'ai des problèmes avec ma Bootstrap navbar.

  1. J'ai beaucoup d'onglets dans la barre de navigation, donc l'en-tête se trouve sur une ligne séparée et les onglets sur la 2e ligne, ce qui ne semble pas bon.

  2. car la barre de navigation prend 2 lignes pour masquer du contenu sur ma page, par exemple, il y a un en-tête au-dessus de la ligne "Veuillez sélectionner le fichier moy.

  3. Comment puis-je résoudre ce problème? Je souhaite que la barre de navigation affiche uniquement des onglets limités, dans la mesure du possible sur une ligne de la barre de navigation et en masque d'autres dans le menu hamburger. Pour qu'il ne cache pas le contenu de mon corps et qu'il soit bien aussi.

P.S: ces problèmes ne se produisent pas lorsque je redimensionne la fenêtre en vue mobile, car le menu hamburger apparaît.

Fenêtre complète

enter image description here

Vue mobile

enter image description here

et le code pour navbar est par défaut avec l'application web ASP.NET Core, la seule chose que j'ai changé était son thème en "inverse"

Voici le code 

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">ChromSACT</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a asp-area="" asp-controller="Home" asp-action="Index" class="aa"><span class="glyphicon glyphicon-home" style="margin-right:6px;"></span>Home</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="Cell">Input</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="CellResult">Marks</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="CellResultRegions">Regions</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="ClusterBits">Cluster Bits</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="RegionsMatrix">Regions Matrix</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="MarksMatrix">Marks Matrix</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="Compare">Compare</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="About"><span class="glyphicon glyphicon-alert" style="margin-right:6px;"></span>About</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="Contact"><span class="glyphicon glyphicon-envelope" style="margin-right:6px;"></span>Contact</a></li>
                <li><button data-toggle="modal" data-target="#myModal" class="btn navbar-btn btn-group-sm"><span class="glyphicon glyphicon-info-sign" style="margin-right:6px;"></span>Instructions</button></li>

            </ul>
        </div>
    </div>
</div>
<div class="container body-content" >
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; 2016 - ChromSACT</p>
    </footer>
</div>
csshtmltwitter-bootstrapnav
9
touseefbsb

Selon bootstrap navbar-fixed-top documents:

Rembourrage du corps requis

La barre de navigation fixe superposera votre autre contenu, sauf si vous ajoutez du rembourrage en haut de la. Essayez vos propres valeurs ou utilisez notre extrait ci-dessous. Astuce: par défaut, la barre de navigation a une hauteur de 50 pixels.

body { padding-top: 70px; }

Assurez-vous de l'inclure après le noyau Bootstrap CSS.

Je pense que si cela prend deux lignes sur la fenêtre non mobile, vous pouvez définir

@media screen and (min-width: 768px) {
    body { padding-top: 100px; }
}
15
Banzay