css - 根据设备调整 Bootstrap NavBar 位置

Question

我有一个布局，其中 Logo 和导航栏在左侧彼此相邻。当视口(viewport)缩小时，导航栏位于 Logo 下方并向左对齐。

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

我正在尝试这个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;
       }
   }