在调整窗口大小时包含指向内容容器的导航条链接

Question

我有一个引导导航条，我需要跨越整个屏幕的宽度，但右边的徽标和链接保持在它下面的容器的宽度一致，如下图所示，并且不让右边的链接跳转到徽标和徽标，当缩小到768px以下时，徽标推到左边:

[=============LOGO------------------------------------------LINK=============]
              |                                                |
              |                                                |
              |                                                |

当用户缩小屏幕时，导航项应该与下面的内容保持内嵌。

<nav class="navbar navbar-default">
<ul class="nav nav-justified centered">
    <li><a href="#"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="140" height="40"></a>
    </li>
    <li><a class="getapp" href="#">LINK</a>
    </li>
</ul>
</nav>
<div class="container">
CONTENT
</div>
.navbar {
background-color: #000;
}
.centered {
    width:100%;
    margin:0 auto;
}
.nav>li{
    display:table-cell;
}

JSFIDDLE:链接

Answer 1

我找到了一个简单的解决方案，通过设置nav的外部div和内容容器使用.inside，其中包含nav和内容相同的宽度。当窗口大小调整时，导航和页面内容以相同的速度增长和缩小。

<nav>
<div class="inside">
  <div class="logo">
    <img src="logo.png">
  </div>
  <div class="links">
    <a href="#"><img src="image.png"></a>
  </div>  
</div>

nav{
  position: fixed;
  top: 0;
  height: 70px;
  width: 100%;
  background: #000;
  z-index: 99999;
}
.logo{
  float: left;
  padding-top: 15px;
}
.links{
  float: right;
  line-height: 50px;
  padding-top: 20px;
  padding-right: 15px;
}
.inside{
  width: 90%;
  margin: 0 auto;
}