BOOTSTRAP Navigationsleiste Stile funktionieren nicht

Ich habe eine Navigationsleiste innerhalb der Klasse Jumbotron mit Bootstrap erstellt. Aber es scheint, dass es ein Problem mit dem Menü der Navigationsleiste gibt. Es gibt keine Auffüllung oder Stile in den "li" -Tags. Alle li-Tags nur sticked zusammen in folgender Weise: HOMEPRICEGALLERYMEDIAFAQsCONTACT USBOOTSTRAP Navigationsleiste Stile funktionieren nicht

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>TATTOO</title> 
 
    <meta charset="utf-8"> 
 
    <meta class="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
    
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    
 
</head> 
 
<body> 
 
<!--create a header first using jumbotron class or header tricks--> 
 
<div class="jumbotron" id="header"> 
 
    <img src="#">here comes the image</img> 
 
    <!-- adding the navigtion bar --> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
     <ul class="nav navbar-nav"> 
 
     <li>HOME</li> 
 
     <li>PRICE</li> 
 
     <li>GALLERY</li> 
 
     <li>MEDIA</li> 
 
     <li>FAQs</li> 
 
     <li>CONTACT US</li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</body>

Quelle

2017-03-19 rishabh jain

Sie vergessen haben, a tags zu Ihrem li Tags hinzuzufügen. dies ein Tag ist für die padding--

.navbar-nav>li>a { 
padding-top: 15px; 
padding-bottom: 15px; 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>TATTOO</title> 
 
    <meta charset="utf-8"> 
 
    <meta class="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
    
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    
 
</head> 
 
<body> 
 
<!--create a header first using jumbotron class or header tricks--> 
 
    
 
    
 
<div class="jumbotron" id="header"> 
 
     <img src="#"> 
 
     
 
     <!-- adding the navigtion bar --> 
 
     <nav class="navbar navbar-default"> 
 
     <div class="container"> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href="#">HOME</a></li> 
 
      <li><a href="#">PRICE</a></li> 
 
      <li><a href="#">GALLERY</a></li> 
 
      <li><a href="#">MEDIA</a></li> 
 
      <li><a href="#">FAQs</a></li> 
 
      <li><a href="#">CONTACT US</a></li> 
 
      </ul> 
 
     </div> 
 
     </nav> 
 
     </div> 
 
    </body> 
 
</body>

Quelle

2017-03-19 12:03:15 neophyte

OMG! Danke, dass du darauf hingewiesen hast. So ein dummer Fehler. –

Erwähnen Sie nicht..nur akzeptieren Sie die Antwort, wenn es geholfen hat. :) – neophyte

Wenn Sie den Text innerhalb der Listenelemente in Anker-Tags wickeln, würden Sie sehen, es gestylt mich :) Lassen Sie wissen, ob es funktioniert

 <ul class="nav navbar-nav"> 
      <li><a href='#'>HOME </a></li> 
      <li><a href='#'>PRICE </a></li> 
      <li><a href='#'>GALLERY </a></li> 
      <li><a href='#'>MEDIA </a></li> 
      <li><a href='#'>FAQs </a></li> 
      <li><a href='#'>CONTACT US </a></li> 
     </ul>

Quelle

2017-03-19 12:08:48

Ja. Es bedankt sich. :) –

BOOTSTRAP Navigationsleiste Stile funktionieren nicht

Antwort

Verwandte Themen