boostrap-非常好用但是容易让人忽略的地方【4】:Font Awesome
font-awesome基本用法
font-awesome在bootstrap中的特殊用法(这个才是重点)
要点归纳1(官方)

要点归纳2(我的)
<a href="javascript:void(0);"><span>日志</span><i class="fa fa-caret-right fa-fw pull-right"></i></a>

原始代码效果:可以看到明显的,三角箭头偏上,当然你也可以对该图标进行自己定位,但经本人测试,确实不怎么好处理(可能水平有限)
下面提供一种github上常见的解决办法
.fa.pull-right { line-height: inherit; }
加上css代码后的效果:几乎完美解决

boostrap-非常好用但是容易让人忽略的地方【4】:Font Awesome的更多相关文章
- boostrap-非常好用但是容易让人忽略的地方------input-group-btn
1.正常的使用 <div class="form-group"> <div class="input-group"> <input ...
- boostrap-非常好用但是容易让人忽略的地方------Font Awesome
font-awesome基本用法 官方代码传送门 font-awesome在bootstrap中的特殊用法(这个才是重点) 要点归纳1(官方) 官方代码传送门 要点归纳2(我的) <a href ...
- boostrap-非常好用但是容易让人忽略的地方------clearfix
代码 显示结果 代码 结果
- boostrap-非常好用但是容易让人忽略的地方------row
row是非常好用但是却非常容易忽略的地方. 想实现内部元素相对父级的padding=0,则在父子中间加个row.如下图 列嵌套也是同样的道理 经验之谈:学会row的用法,在手机版布局的时候会很方便,否 ...
- boostrap-非常好用但是容易让人忽略的地方------modal
使用bootstrap框架好久了,在开发中也用到了或者遇到了很多的问题,所以跟大家分享一下 bootstrap modal 组件的样式 .modal-lg .modal-sm 说明:这个是bootst ...
- boostrap-非常好用但是容易让人忽略的地方【7】:list-unstyled list-inline
无样式列表 list-unstyled:去掉ul的默认样式 内联列表 list-inline:将ul子元素放置于同一行
- boostrap-非常好用但是容易让人忽略的地方【6】:role属性
普通样式,鼠标hover没有任何效果 <span>content</span> 加上role属性的样式,鼠标hover会有cursor:pointer的效果 <span ...
- boostrap-非常好用但是容易让人忽略的地方【5】:input-group-btn
1.正常的使用 <div class="form-group"> <div class="input-group"> <input ...
- boostrap-非常好用但是容易让人忽略的地方【3】:clearfix
代码 显示结果 代码 结果
随机推荐
- Linux下的python安装
centos7安装python3 以及tab补全功能 1.安装python3 1.1下载python源码包 网址:https://www.python.org/downloads/release/ ...
- hdu4325 线段树 成段更新
#include<stdio.h> #include<string.h> #include<algorithm> using namespace std; #def ...
- poj 3225 【线段树】
poj 3225 这题是用线段树解决区间问题,看了两天多,算是理解一点了. Description LogLoader, Inc. is a company specialized in provid ...
- python 嵌套列表
- jQuery学习笔记之解除重复点击事情重复绑定
问题:有不同的按钮点击后都执行相同的事件,在jQuery重复点击就会产生事件重复绑定. 解决方法:使用unbind("click")方法,每次点击都先接触绑定已有事件再绑定新对象. ...
- 05Redis入门指南笔记(持久化)
Redis的强劲性能很大程度上是由于将所有数据都存储在了内存中,然而当Redis重启后,所有存储在内存中的数据就会丢失.在一些情况下,希望Redis能将数据从内存中以某种形式同步到硬盘中,使得重启后可 ...
- @总结 - 10@ Miller-Rabin素性测试与Pollard-Rho因数分解
目录 @1 - 素性测试:Miller-Rabin算法@ @1.1 - 算法来源@ @1.2 - 算法描述@ @1.3 - 算法实现@ @2 - 因数分解:Pollard-Rho算法@ @2.0 - ...
- Oracle/PLSQL存储过程详解
原文链接:https://blog.csdn.net/zezezuiaiya/article/details/79557621 Oracle/PLSQL存储过程详解 2018-03-14 17:31: ...
- 运行项目npm run dev时报错: ~Error: Cannot find module 'webpack-cli/bin/config-yargs', 原因是
webpack@3.X运行项目npm run dev时报错: ~Error: Cannot find module 'webpack-cli/bin/config-yargs' 我的原因是: web ...
- CSS3 ,fill-available、max-content、min-content、fit-content,自适应
自适应: 撑满空闲空间与收缩到内容尺寸. CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'. 除此之外 ,还新增了更细粒度的'min-content'和'ma ...