2017-10-08 20 views
0

Ich habe versucht, diese zu kopieren: http://prntscr.com/gutg8bBootstrap Zentrum Symbol

Stattdessen bekam ich dies: http://prntscr.com/gute2v

verwendete ich twitter Bootstrap, ich frage mich, wie kann ich das erste Bild leicht nachahmen, wie die Symbole muss auf die Links stapeln und das Twitter-Icon muss in der Mitte des Bildschirms sein und dann müssen der Avatar und die Suche auch richtig nebeneinander gestapelt werden.

Was soll ich hier beheben?

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 
     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
      <i class="fa fa-home fa-lg"></i> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
      <i class="fa fa-bell-o fa-lg"></i> <a class="nav-link" href="#">Notifications</a> 
      </li> 
      <li class="nav-item"> 
      <i class="fa fa-envelope-o fa-lg"></i> <a class="nav-link" href="#">Messages</a> 
      </li> 
     </ul> 

     <div><i class="fa fa-twitter fa-lg"></i></div> 
     <form class="form-inline my-2 my-lg-0"> 
      <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
     </form> 

     <div><img src="img/avatar.jpg" alt="" style="border-radius: 50%; width: 30px;"></div> 
     </div> 
    </nav> 

Antwort

0

Changed Ihre html:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
     <div class="pull-left"> 
      <ul class="navbar-nav mr-auto"> 
       <li class="nav-item active"> 
        <i class="fa fa-home fa-lg"></i> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <i class="fa fa-bell-o fa-lg"></i> <a class="nav-link" href="#">Notifications</a> 
       </li> 
       <li class="nav-item"> 
        <i class="fa fa-envelope-o fa-lg"></i> <a class="nav-link" href="#">Messages</a> 
       </li> 
      </ul> 
     </div> 


     <div class="icon-center"> 
      <i class="fa fa-twitter fa-lg"></i> 
     </div> 

     <form class="form-inline my-2 my-lg-0"> 
      <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
     </form> 

     <div> 
      <img src="img/avatar.jpg" alt="" style="border-radius: 50%; width: 30px;"> 
     </div> 
    </div> 
</nav> 

Und hat dieses Bild mit dem CSS:

.icon-center { 
    display: block; 
    margin: auto; 
} 
.nav-link { 
    display: inline-block; 
} 
Verwandte Themen