根据设备调整 Bootstrap NavBar 位置

Question

我有一个布局，其中徽标和导航栏向左相邻。当视口减小时，导航栏位于徽标下方并左对齐。

我计划将导航栏保持在右侧并与徽标垂直居中对齐（当前导航栏顶部对齐）。当视口尺寸减小时，导航栏应位于徽标下方的左侧。

我正在尝试这个css，但无法实现我想要的布局

@media (min-width: 768px) {
    .navbar .navbar-nav {
        float: right;
        vertical-align: middle;
    }

    .navbar .navbar-collapse {
        float:left;
    }
}

http://codepen.io/anon/pen/PqYJEL

Answer 1

1. 从您的导航中删除导航栏类（保留导航栏默认）
2. 将 col-md-9 更改为 col-md-7（或 col-md-8） - 您没有行父级以便添加填充

3. 添加以下css

   @media (min-width: 768px) {
       .logoheader > * {
           display: inline-block;
           vertical-align: middle;
           float: none;
       }
   
       .navbar-default
       {
           float: right;
       }
   
       .navbar .navbar-collapse {
           float:left;
       }
   }