在移动设备上，如何将按钮保持在屏幕的右侧

Question

在我的导航栏上，我在屏幕左侧有一个徽标，在屏幕右侧有一个按钮。在桌面上它看起来很棒，但在移动设备上，按钮会向下移动一点并在徽标旁边。如何在移动设备上将按钮保持在徽标和屏幕右侧的同一水平位置。

这是我的bootply： http://www.bootply.com/eRhpUjRg1E

这是我的HTML：

    <!-- 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>

这是我的CSS：

.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

在按钮css中添加一个浮动：右键。 更新了你的bootply。 Bootstrap填充导致它，相应地调整填充。我这样做是为了将它们放到底部。

.navbar-brand {padding：18px 15px; font-size：18px; line-height：20px;}

Answer 2

您可以在按钮标记中添加额外的bootstrap默认类：“pull-right”。

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