Wie macht man das im Bootstrap?

Wie in img oben Navigation in Bootstrap Wie macht man das im Bootstrap?

2017-04-06 Ram Ratan Bairar

Blick auf diese http://getbootstrap.com/components/#navbar Sie verwenden, um die Klasse "navbar-Marke"

2017-04-06 05:53:43

aber es wird navbar-Marke inline zu den Navigationsmenüpunkte setzen. –

Hier gehen Sie setzen Logo wie zu machen. Lassen Sie mich wissen, wenn Sie das erreichen möchten. Weiter codieren.

.top-bar { 
 
    padding: 2vw; 
 
    background-color: #6495ED; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <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"> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="top-bar"> 
 
     <img src="http://icons.iconarchive.com/icons/famfamfam/flag/16/gb-icon.png" class="img-responsive"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">England</a> 
 
     </div> 
 

 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> 
 
      <li><a href="#">About Us</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
     </div> 
 
     <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
    </nav> 
 
    <div class="container-fluid"> 
 
    <p> Example 
 
    </p> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

Quelle

2017-04-06 06:51:37

Wie macht man das im Bootstrap?

Antwort

Verwandte Themen