Navbar & Container wird zusammengebrochen

-1

Ich versuche, Hallo als Überschrift unter Nav-Tag zu halten. Das ist mein HTML.Navbar & Container wird zusammengebrochen

<nav class="navbar navbar-default navbar-fixed-top" style="background-color: aliceblue;" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <img class="img-responsive" src="img/logo.png" style="width: 330px; height: 49px;" /> 
    </div> 
    <ul class="nav navbar-nav navbar-right" id="navbarprop"> 
     <li id="home" class="active"> 
      <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a> 
     </li>    
    </ul> 
</div> 
</nav> 
<div class="container"> 
<h1>HELLO</h1> 
</div>

Ich möchte meine Seite reagieren. Das Problem entsteht, wenn das Hallo in das Nav-Tag gedruckt wird. ich muss margin-top anwenden: 50px; um "HELLO" sichtbar zu machen. Wie reagiere ich darauf? Dies ist das Bild ohne Rand oben http://imgur.com/q5yol6t Hallo ist in der nav. Dies ist das Bild mit Rand oben http://imgur.com/j8tjUbZ Vielen Dank im Voraus!

Quelle

2016-08-04 SAT Rai

Sie müssen auch Ihre CSS teilen. Was wäre gut, wenn Sie es in etwas wie ein Spiel oder ähnliches platzieren könnten. – Andrew

http://getbootstrap.com/components/#navbar-fixed-top

Blick vor allem auf den Teil, wo er sagt, der Körper Polsterung erfordert.

Die feste Navigationsleiste überlagert Ihren anderen Inhalt, es sei denn, Sie fügen dem oberen Rand der <body> Auffüllung hinzu. Probieren Sie Ihre eigenen Werte aus oder verwenden Sie unser Snippet unten. Tipp: Standardmäßig ist die Navigationsleiste 50 Pixel hoch.

body { padding-top: 70px; }

Stellen Sie sicher, dies nach dem Kern Bootstrap CSS aufzunehmen.

Quelle

2016-08-04 11:56:53 i7nvd

Sie können dies mit Bildschirmmedien lösen, geben nur einen anderen Rand oben für Bildschirme weniger als 767px (außer Tablet, Laptop und Desktop) Hoffe, es wird Ihnen helfen.

<style> 
body 
{ 
    background-color:#4FE1A8; 
} 
#wrapper 
{ 
    margin-top:50px; 
} 
@media screen and (max-width:767px) 
{ 
    #wrapper 
{ 
    margin-top:100px; 
} 
} 
</style> 
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: aliceblue;" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <img class="img-responsive" src="img/logo.png" style="width: 330px; height: 49px;" /> 
    </div> 
    <ul class="nav navbar-nav navbar-right" id="navbarprop"> 
     <li id="home" class="active"> 
      <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a> 
     </li>    
    </ul> 
</div> 
</nav> 
<div class="container" id="wrapper"> 
<h1>HELLO</h1> 
</div>

Quelle

2016-08-04 12:05:36

Navbar & Container wird zusammengebrochen

Antwort

Verwandte Themen