Navbar Optionen nicht unter Header Bootstrap

Details: Ich benutze Bootstrap 3.3.6, versuchen, meine erste Navbar mit Bootstrap, eine Navbar, die kollabierbaren auf Handys für bessere UI ist.Navbar Optionen nicht unter Header Bootstrap

Problem: Wenn auf die Schaltfläche geklickt wird, werden die Optionen nicht unter der Marke nav angezeigt, aber die erste wird neben der Marke angezeigt und der Rest ist unter der ersten Option.

z ->

Ich möchte, dass die Optionen unter dem nav-Marke "Dhruv Yadav" gestapelt werden.

index.html ->

<!DOCTYPE html> 
<html> 
<head> 
<title>Dhruv Yadav</title> 
<link type="text/css" rel="stylesheet" href="main.css" /> 
<link rel="stylesheet" href="bootstrap.min.css" /> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
</head> 
<body> 
    <div id="navbar" class="navbar navbar-fixed-top"> 
    <div class="container"> 
     <a href="#" class="navbar-brand" style="color:white;font-family:'customfont',sans-serif;font-weight:bold;font-size:30px;">Dhruv Yadav</a> 
     <button id="navbtn" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
     <i style="color:white;" class="fa fa-arrow-down" aria-hidden="true"></i> 
    </button> 
    <div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav navbar-right navoptions"> 
     <li><a class="navoptions" href="#">Home</a></li> 
     <li><a class="navoptions" href="#">About</a></li> 
     <li><a class="navoptions" href="#">Portfolio</a></li> 
     <li><a class="navoptions" href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 
<div class="card"></div> 
<script src="bootstrap.min.js"></script> 
</body> 
</html>

main.css ->

@font-face 
{ 
font-family: "customfont"; 
src : url("AlexBrush-Regular.ttf") format("truetype"); 
} 
#navbar 
{ 
background-color: #C00000; 
} 
#navbtn 
{ 
background-color : #C00000; 
border : 2px solid white; 
border-radius: 10px; 
height : 38px; 
} 
#navbtn:hover 
{ 
transition : all 0.1s ease-in; 
background-color : #900000; 
} 
.card 
{ 
    width : 100%; 
    height : 400px; 
    margin : 0 auto; 
    background-color : white; 
} 
.navoptions 
{ 
    font-size : 17px; 
    font-weight : 200; 
    font-family : sans-serif; 
    color : white; 
} 
.navoptions:hover 
{ 
    transition : all 0.25s ease-in; 
    color : black; 
}

danken Ihnen, jede mögliche Hilfe würde geschätzt erhalten.

Quelle

2016-04-17 programmingandroid

Sie sollten ein Div für Nav-Marke "Dhruv Yadav" und Navbtn, und andere für Ihre Navbar verwenden.

 <div> 
     <a> ... </a> 
     <button> ... </button> 
    </div> 
     <div> 
      ... navbar ... 
     </div> 
    </div>

Oder Sie sollten nav-Marke und navbar kombinieren. Etwas wie:

 <div> 
     <a> ... </a> 
     <div> 
      ... navbar ... 
     </div> 
    </div> 
    <button> ... </button>

Quelle

2016-04-17 10:38:08

funktioniert nicht :( – programmingandroid

Sie haben vergessen Wrapper Gruppe Marke und Taste:

<div class="navbar-header"> 
    <a href="#" class="navbar-brand" style="color:white;font-family:'customfont',sans-serif;font-weight:bold;font-size:30px;">Dhruv Yadav</a> 
    <button id="navbtn" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
    <i style="color:white;" class="fa fa-arrow-down" aria-hidden="true"></i> 
    </button> 
</div>

JSFiddle-example

Quelle

2016-04-17 11:20:27

Navbar Optionen nicht unter Header Bootstrap

Antwort

Verwandte Themen