Problem mit Mobile Bootstrap-Menü

-2

ich nicht die Mobile Version des Menüs richtig machen kann ... Hier sind einige Screenshots: http://imgur.com/a/q5VZF
http://imgur.com/a/20saC Problem mit Mobile Bootstrap-Menü

mit Bootstrap JS und CSS

EDIT: Leider um keine Frage zu stellen. Meine Frage ist, wenn ich es mobil öffne, werde ich nicht den Zusammenbruchmenüknopf sehen, und wenn ich öffne, ist in einem kleinen Browser ich ... kann jemand mir dabei helfen?

body { 
 
    background-color: #adadad; 
 
} 
 

 
.log{ 
 
    background-color: #C7002B; 
 
    height: 40px; 
 
} 
 
.logblock{ 
 
    /*width: 1080px;*/ 
 
    margin: auto; 
 
    font-weight: bold; 
 
} 
 
.logtext{ 
 
    float: right; 
 
    margin-right: 32px; 
 
    margin-top: 10px; 
 
} 
 
.logtext a{ 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
.navbar{ 
 
    height: 80px; 
 
    border-radius: 0px; 
 
    font-weight: bold; 
 
} 
 
.navbar-toggle{ 
 
    margin-top: 23px; 
 
} 
 
.navbar-default { 
 
    background-color: #ffffff; 
 
    border-color: #e7e7e7; 
 
} 
 
.navbar-brand img { 
 
    height: 50px; 
 
} 
 
.navbar-nav li a{ 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
} 
 
.navbar-default .navbar-collapse, .navbar-default .navbar-form { 
 
    border: none; 
 
} 
 
.navbar-nav>li>.dropdown-menu { 
 
    margin-top: -2px; 
 
} 
 

 

 

 
.dropdown-menu li a{ 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 
/*@media (min-width: 768px){ 
 
    .logblock { 
 
     width: 1080px; 
 
    } 
 
    .container-fluid{ 
 
     width: 1080px; 
 
    } 
 

 
}*/ 
 

 
@media (max-width: 768px){ 
 
    .logblock{ 
 
     width: 100%; 
 
    } 
 

 
    .navbar-header{ 
 
     height: 75px; 
 
    } 
 
    .navbar-collapse { 
 
     background-color: #ffffff; 
 
     border-color: #e7e7e7; 
 
    } 
 
    .navbar-nav li a{ 
 
     padding-top: 10px; 
 
     padding-bottom: 10px; 
 
    } 
 

 
    .container-fluid{ 
 
     width: 100%; 
 
    } 
 
}

<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">WebSiteName</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li class="dropdown"> 
 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Page 1-1</a></li> 
 
         <li><a href="#">Page 1-2</a></li> 
 
         <li><a href="#">Page 1-3</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">Page 2</a></li> 
 
       <li><a href="#">Page 3</a></li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
 
       <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>

Quelle

2017-02-28 user3224519

Willkommen SO, einen Rundgang durch die Hilfe nehmen Sie bitte, um zu sehen, wie man eine gute Frage zu stellen und welche Arten von Fragen sind auf Thema für die Seite – Pete

Schauen Sie hier http://Stackoverflow.com/help/on-topic und hier [mcve] –

Sie diesen Code verwenden können:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <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"></script> 
</head> 
<body> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Page 1-1</a></li> 
      <li><a href="#">Page 1-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

</body> 
</html>

Quelle

2017-02-28 13:01:11 KiranPurbey

Wenn Sie wieder ein Problem finden, finden Sie unter diesem Link https://www.w3schools.com/ – KiranPurbey

How Kennen Sie den OP-Code? Sie haben keine zur Verfügung gestellt. –

Problem mit Mobile Bootstrap-Menü

Antwort

Verwandte Themen