根据设备调整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. 从导航栏中删除导航栏类（保留navbar-default）
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;
       }
   }