Mobilde, düğmeyi ekranın sağ tarafında nasıl tutacağım

Question

Benim navbarımda, ekranın sol tarafında bir logo ve ekranın sağ tarafında bir düğme var. Masaüstünde harika görünüyor, ancak mobilde, düğme biraz aşağı ve logo yanında hareket ediyor. Düğmeyi logoda ve ekranın sağ tarafında mobilde aynı yatay seviyede nasıl tutarım.

.btn-button-outline, .btn-button-outline:link, .btn-button-outline:visited { 
background-color: transparent; 
border-radius: 8px; 
color: #355A78; 
border: 2px solid #355A78; 
font-family: 'Lato', sans-serif; 
font-weight: 400; 
box-shadow: none; 

} 
.btn-button-outline:active, .btn-button-outline:hover { 
    background-color: #355A78; 
    color: #fff 
} 

.btn-button-outline.btn-lg { 
    border: 3px solid #355A78; 
} 
.btn-button-outline.btn-sm { 
    border: 1px solid #355A78; 
} 
.btn-button-outline.btn-xs { 
    border: 1px solid #355A78; 
} 

Answer 1

bir float ekleyin: sağ düğme css İşte

<!-- Navigation --> 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container topnav"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-brand"> 
      <img class="img-responsive" src="http://www.onvia.com/responsive/logo_company.png"> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="https://www.apple.com"><button type="button" class="btn btn-button-outline btn-small">Sign in</button></a></li> 
     </ul> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

benim CSS: Burada http://www.bootply.com/eRhpUjRg1E

benim HTML var: Burada

benim bootply var . , açılış mesajınızı güncelledi. Bootstrap dolgusu neden oldu, dolguyu buna göre ayarlayın. Onları dibe gömmek için yaptım.

.navbar-brand {padding: 18px 15px; yazı tipi boyutu: 18px; satır yüksekliği: 20px;}

Answer 2

Ekstra önyükleme varsayılanı sınıfı ekleyebilirsiniz: düğme etiketinde "çekme hakkı".

<button type="button" class="btn btn-button-outline btn-small pull-right">Sign in</button>