您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页记录一个Bootstrap导航栏的右对齐问题--前端笔记

记录一个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默认状态的父元素位置,会脱出文档流

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务