风君子博客

  • 首页
  • 业界
  • 前端
  • 运维
  • 建站
  • 软件
  • 生活
  • 后端
  • 创投
  • 运营
  • 程序人生
    • 影视
    • 游戏
    • 句子
    • bootstrap4教程
    • 资源
    • 日期计算器
  • 其他
    • 说说
    • 关于本站
  1. 首页
  2. 前端
  3. 正文

Bootstrap4实现导航栏右侧对齐

2018年12月7日 57706点热度 0人点赞 0条评论

Bootstrap 4正解:
.ml-auto元素居右
.mr-auto元素居左

或者在包含导航栏的 <div> 加上 .justify-content-end 样式即可

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<div class="container">
		<a class="navbar-brand" href="/">Cynhard的博客</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
			<span class="navbar-toggler-icon"></span>
		</button>
		<!-- 这个 div 加上 justify-content-end 样式即可 -->
		<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
			<ul class="navbar-nav" id="headerNav">
				<li class="nav-item" id="navMainPage"><a class="nav-link" href="/"> 主页 </a></li>
				<li class="nav-item" id="navTechPage"><a class="nav-link" href="/tech"> 技术 </a></li>
				<li class="nav-item" id="navFoodPage"><a class="nav-link" href="/food"> 料理 </a></li>
				<li class="nav-item" id="navPhotoPage"><a class="nav-link" href="/photo"> 摄影 </a></li>
				<li class="nav-item" id="navEssayPage"><a class="nav-link" href="/essay"> 随笔 </a></li>
			</ul>
		</div>
	</div>
</nav>

 

标签: bootstrap
最后更新:2019年6月7日

风君子

独自遨游何稽首 揭天掀地慰生平

点赞
< 上一篇
下一篇 >

猜你喜欢

  • bootstrap4 dropdown 的导航下拉菜单触发方式改为鼠标浮动触发

  • Bootstrap3.3.7导航栏下拉菜单从点击改为鼠标滑过展开

  • bootstrap中sr-only是什么属性?用途是什么?

  • Bootstrap 3生命周期结束

  • 流行开发工具 bootstrap-sass 被修改植入后门

  • 免费获取wrapBootstrap模板的方法

  • bootstrap table 宽度设置无效问题解决方法

文章评论

取消回复

风君子

独自遨游何稽首 揭天掀地慰生平

最新 热点 随机
最新 热点 随机
分析师:苹果 iPhone 需求仍强劲,iPhone 14 / Pro 系列初期量产计划会高于 iPhone 13 / Pro 国内首发锐炫 A370M 显卡,雷神推出新款 T-Book 轻薄创作本 苹果委托的研究称:App Store 让小企业和独立开发者受益,收入比大企业增长更快 美股科技股暴跌让卖空者收益颇丰:34% 的利润来自 IT 股 苹果斥资数百万美元安置无家可归者,9 个月期满后仅安置 8 人 机械革命预热水冷游戏本旷世 X:12 代酷睿 HX + RTX 3080 Ti,17 英寸 2.5K 240Hz 屏 苹果新专利:未来 Apple Pencil 配备全触控式控制 RTX 40 系列守口如瓶?NVIDIA 台北电脑展官宣 12 款游戏支持 DLSS,500Hz G-SYNC 显示器问世 《电子竞技产业报告》研讨会召开,腾讯、网易、完美等多家相关企业参加 F1 赛车手通过苹果“Find My”追踪盗窃 AirPods 耳机的小偷
抖音IP属地准确吗e地跑:全国线路覆盖率达92.5%,将升级智能扫码加油功能完成加油监控米哈游《原神》全球用户支出将突破 27 亿美元:打破最高季度纪录,中美日韩德支出最多索尼 QD-OLED 画谛系列电视 A95K 国行即将发布格力电器 2021 年营收 1878.69 亿元同比增长 11.69%施耐德电气顾俊:5G赋能,制造业智能化转型“加速”苹果将 iPad Air 2 和 iPad Mini 2 加入过时产品名单IDC:2021 年中国网络市场规模达 102.4 亿美元,路由器市场同比下滑 2.6%波导股份第一季度净利润 552.94 万元,同比增长 75.79%我们常用谁言寸草心报得三春晖歌颂母爱,它的作者是
特斯拉中控屏故障被投诉几万次!美国扩大调查范围 或将强制召回 NASA:俄航天局在考虑国际空间站合作期限延长到2030年 华为荣耀V8和华为P9哪个更值得购买?华为荣耀V8和P9全面详细对比评测 长安汽车:2022 年将投放阿维塔 11、长安 LUMIN、C385 等众多新能源产品 《你好,李焕英》票房破40亿:口碑碾压《唐探3》 烽火通信的岁月往事 初审通过下卡概率大吗 Smartisan TNT go扩展本发布:手机秒变笔记本、全家桶8299元 网易云音乐边听边存怎么设置 捏咔怎么捏人
标签聚合
iphone IT资讯 京东 银行 苹果 腾讯 股票 业界 利率 汽车 三星 芯片 借款人 美国 华为 秘籍 快科技 特斯拉 谷歌 信用卡 银行卡 小米 科技 马斯克 额度 支付宝 贷款 利息 手机 微软
Tags
酒 胡萝卜 食物 私房菜 有什么好处 水果 能吃 鸡蛋 身体 会胖吗 副作用 吃什么 相克 好处 饮食 作用 土豆食谱 方法 牛肉 豆腐 糖 热量 茄子 好吃 营养 皮肤过敏 区别 菜谱 牛肉食谱 功效 怎么做 营养价值 豆腐食谱 维生素 土豆 热菜 食用方法 常吃 健康 排骨 汤类 高血压 牛奶 糖尿病人 做法 吃法 下饭菜 海鲜 一起吃 排骨食谱
最近评论
九九 发布于 3 周前(05月06日) 也可能是 IP2LOCATION 数据
风君子 发布于 5 个月前(12月20日) 直播这么赚钱的吗?
wanif 发布于 5 个月前(12月18日) 采用你提供的pe制作u盘后无法识别mac硬盘,如何解决?
robotunl 发布于 5 个月前(12月18日) 可以用了,感谢
robotunl 发布于 5 个月前(12月17日) DISM++链接下不了了啊,能再发一个么。 还有怎么制作和博主一样的PE u盘。
tiantian 发布于 10 个月前(08月08日) 谢谢分享!
欣姐 发布于 1 年前(02月06日) 很有道理啊
我在東莞上班睡覺工資一千五六 发布于 1 年前(12月16日) 东莞台商都开始搬迁河源,梅州包括赣州一些地方要么就是内地城市,因为电子厂需要大量人力所以基本上都是中...
我在東莞上班睡覺工資一千五六 发布于 1 年前(12月16日) 这个怎么有意思了,是不是太真实了 :smile: :smile:
东莞石碣维信五金制品有限公司睡觉一千五六 发布于 1 年前(12月15日) 台商大陆模式搞习惯了去了印度未必成功 :idea:

COPYRIGHT © 2021 风君子博客. ALL RIGHTS RESERVED.

豫ICP备14018241号