Navbar'da Geri Düğmesi Ekle

Question

Uygulamamın en üstünde görünen bir navbar oluşturmaya çalışıyorum. Böyle bir şey bakmak navbar istiyorum: bunu yapmak için başarısız girişimde

+--------------------------------------------------------+ 
|              | 
| <- Status            | 
|              | 
+--------------------------------------------------------+ 

, ben bu bootply görülebilir şu navbar oluşturmak ettik.

<nav class="navbar"> 
    <div class="container-fluid"> 
    <div class="navbar-header navbar-default"> 
     <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#menu"> 
     <span class="sr-only">Toggle navigation</span> 
     </button> 
     <div> 
     <a class="btn btn-link btn-xs" href="/home"><i class="fa fa-arrow-circle-o-left" style="font-size: 2.5rem;"></i></a> 
     <div class="navbar-brand">Hello</div> 
     </div> 
    </div> 
    </div>   
</nav> 

Eğer Bootply ziyaret ederseniz, ok yerine solun başlığının sağ göründüğünü görebilirsiniz. Ne olduğu hakkında hiçbir fikrim yok. Ayrıca, geri düğmesi metin gibi dikey olarak ortalanmamış değildir. Geri düğmesi neden daha önce yerine başlıktan sonra görünüyor? flex ile padding ve float ile

One, başka:

Answer 1

Sana iki bununla ilgili yollar söyleyebilir.

Bootply : http://www.bootply.com/23Knh8HEVE

HTML

<nav class="navbar"> 
    <div class="container-fluid"> 
    <div class="navbar-header navbar-default"> 
     <button class="navbar-toggle collapsed" type="button" data-target="#menu" data-toggle="collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     </button> 
     <div> 
     <a class="mybtn btn btn-link btn-xs" href="/home"><i class="fa fa-arrow-circle-o-left" style="font-size:2.5rem;"></i></a> 
     <div class="navbar-brand">Hello</div> 
     </div> 
    </div> 
    </div>   
</nav> 

<nav class="navbar"> 
    <div class="container-fluid"> 
    <div class=" navbar-header navbar-default"> 
     <button class="navbar-toggle collapsed" type="button" data-target="#menu" data-toggle="collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     </button> 
     <div class="mycontainer"> 
     <a class="mybtn2 btn btn-link btn-xs" href="/home"><i class="fa fa-arrow-circle-o-left" style="font-size:2.5rem;"></i></a> 
     <div class="navbar-brand">Hello</div> 
     </div> 
    </div> 
    </div>   
</nav> 

CSS

.mybtn{float:left;padding:15px;display:inline-block;} 

.mycontainer{display:flex;align-items:center;} 

PS: Düğmenizde, sağda ise br çünkü ve solda yüzüyor ...