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

Question

在我的导航栏上，屏幕左侧有一个 Logo ，屏幕右侧有一个按钮。在桌面上它看起来不错，但在移动设备上，按钮向下移动了一点并靠近 Logo 。如何使按钮在 Logo 和移动屏幕右侧的同一水平面上。

这是我的 Boot : 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 中添加一个 float:right。更新了你的 bootply。引导填充导致它，相应地调整填充。我这样做是为了将它们齐平地放到底部。

.navbar-brand {内边距:18px 15px；字体大小:18px；行高:20px；