记录一个Bootstrap导航栏的右对齐问题--前端笔记

要加一个切换语言的链接，加到导航栏右边。

Bootstrap是这么加的：

■■■第一种

在<div class='navbar-header'>.......</div>

后面加div

p添加类navbar-text pull-right（或者navbar-right，这里试了好几次，效果有一点不同

<div id='langChange'>

<p class='navbar-text pull-right'>

    <a href='en.html' class='navbar-link'>English</a>

</p>

</div>

或者

■■■第二种

在class="collapse navbar-collapse"的div里面加

<ul class='nav navbar-nav navbar-right'>

<li>English</li>

</ul>

这两种的大屏效果都一样：

但在移动端就有差：

第一种，位置不对

第二种，被收到里面去了

为了得到这样的效果：

应该怎么做呢？

怪我position没学好……

补习后，得到解决：

html代码用第一种，毕竟不想English被收起来，css：

@media(max-width:767px) {

 #langChange {

position: absolute;

top:0px;

right: 72px;

} }

原来relative要占位，而absolute不占位。。。

relative是相对自己原本的位置

absolute是相对第一个static默认状态的父元素位置，会脱出文档流

更多position知识：http://www.cnblogs.com/dolphinx/archive/2012/10/13/2722501.html