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

时间:2015-09-09 19:08:25

标签: html css twitter-bootstrap

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

0 个答案:

没有答案