我有一个自举导航栏,我需要跨越整个屏幕宽度,但是右侧的徽标和链接保持其下方容器的一致宽度,如下图所示,并且没有链接右手跳到徽标,徽标缩小到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:LINK