bootstrap的自适应尽量少用绝对宽度px来定义大小,这会导致缩小屏幕宽度时相冲突,多使用百分比来改变位置。。

遇到不能用margin和padding来改变位置时,首先应该想到绝对定位和相对定位(position),通过定位改变其大小。

bootstrap自适应时如果小分辨率会导致页面失衡,那么加上col-sm-*,不要只加两个自适应(md 和 lg)。

现在要改变的是自己的思维方式,比如div盒子怎么摆放位置,看美工图 首先划分一下div盒子模型,这取决于做一个页面是否能有效、便捷、快速的方法,div盒子划分不正确那么意味着要走很多的不必要的弯路。

有字体图标和文字描述时,可以给字体图标设置display:block  让其占其一行,把文字换行,在让父级元素显示文本居中对齐:text-align:center、

字体图标和文字在ul、li中时,给ul设置弹性布局display:flex,同时设置是否考虑换行,flex-wrap:wrap(wrap默认换行),其中可以给ul设置宽度,但不要设置绝对宽度(px),而设置百分比宽度width:100%;

li中同时设置弹性布局display:flex,为了让字体和图标居中对齐,设置align-item:center,设置字体图标与文字描述的摆放位置,一般设置flex-direction:column;其中可以给li分几等分,比如width:25%,那么就是分成四等分,每份占25%的大小,依此类推。

bootstrap的自适应 和细节点的更多相关文章

  1. 关于“创业者与VC见面的10个不成文细节点”

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Will Wang链接:http://www.zhihu.com/question/19641135/answer/50974 ...

  2. 【JAVA】高并发优化细节点

    高并发优化细节点: 微服务化 如何发现系统瓶颈?   如何高效利用有限内存: 使用基本类型 使用数组,不用集合 自定义map与数据结构   Integer—>int, Set<Intege ...

  3. Bootstrap treeview增加或者删除节点

    参考(AddNode: http://blog.csdn.net/qq_25628235/article/details/51719917,deleteNode:http://blog.csdn.ne ...

  4. 关于Vue父子组件传值(复杂数据类型的值)的细节点

    vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...

  5. 使用bootstrap网格系统自适应盒子宽度时保持所有盒子高度一致。

    使用了bootstrap网格系统的好处是很容易便实现了响应式布局,盒子可以根据设置的样式,随着屏幕的大小改变而自动改变宽度,但是也存在一个问题,那就是盒子的高度是由盒子的内容决定的,如果盒子里的内容不 ...

  6. vue 组件使用中的细节点

    1.is属性 有些 HTML 元素,诸如 <ul>.<ol>.<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的.而有些元 ...

  7. Android应用开发细节点

    1.如果handler是在主线程声明,就属于主线程,handleMessage属于引用handler的那个线程:2.ByteArrayOutputStream/ByteArrayInputStream ...

  8. angular-route 和soket注意细节点

    route run 文件是第一个位置,之后才配置路由哪些,代码: angular.module('technodeApp',['ngRoute']).run(function($window,$roo ...

  9. vuejs使用组件的细节点

    is属性 <div id='root'> <table> <tbody> <row></row> <row></row&g ...

随机推荐

  1. Activiti 手工任务(manualTask)

    Activiti 手工任务(manualTask) 作者:Jesai 前言: 手工任务就是一个自动执行的过程.手动任务几乎不在程序中做什么事情,只是在流程的历史中留下一点痕迹,表明流程是走过某些节点的 ...

  2. python 黏包现象

    一.黏包 1.tcp有黏包现象 表现两种情况 发送的数据过小且下面还有一个发送数据,这两个数据会一起发送 发送的数据过大,超过最大缓存空间,超出的部分在下一次发送的时候发送 原因: tcp是面向流的, ...

  3. pymysql 增

    1.重点:数据库插入数据需要进行---------事物提交 其它:事物回滚 import pymysql # 注册用户 print("=========注册用户===========&quo ...

  4. [bzoj1875] [洛谷P2151] [SDOI2009] HH去散步

    Description HH有个一成不变的习惯,喜欢饭后百步走.所谓百步走,就是散步,就是在一定的时间 内,走过一定的距离. 但 是同时HH又是个喜欢变化的人,所以他不会立刻沿着刚刚走来的路走回. 又 ...

  5. 第二阶段冲刺个人任务——six

    今日任务: 搭建网络服务器,上传数据库及程序. 昨日成果: 合并程序(统计团队博客).

  6. Java容器解析系列(12) LinkedHashMap 详解

    LinkedHashMap继承自HashMap,除了提供HashMap的功能外,LinkedHashMap还是维护一个双向链表(实际为带头结点的双向循环链表),持有所有的键值对的引用: 这个双向链表定 ...

  7. 开发工具篇:Git和Github

    开发工具篇:Git和Github Git是什么? Git是目前世界上最先进的分布式版本控制系统.工作原理 / 流程: Workspace:工作区 Index / Stage:暂存区 Repositor ...

  8. laravel aritisan命令大全

    1常用命令 显示某个命令的帮助 php artisan -h make:controller 实例命令 php artisan make:controller -r Api/TestControlle ...

  9. mysql--->mysql慢查询

    简介 > 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能 参数及命令说明 查看慢查询是否开启和日志存储地址 show var ...

  10. vsphere部署说明

    前言 简单介绍一下vsphere及相关组件: vsphere是VMware公司推出一款虚拟化产品,ESXi与Vcenter是其组成部分:ESXi将物理基础设施虚拟化成虚拟池,Vcenter将ESXi虚 ...