导航栏到小屏幕的时候，我们的处理办法是隐藏为一个按钮。可是选项卡的标签页部分，我们的处理办法是加一个水平滚动条。但是加水平滚动条需要解决一个问题，就是宽度的问题，如果不设置宽度，他就会根据屏幕大小自适应，这样的话就会出现换行掉下去的情况，不会出现横向滚动条。

　　1、动态给ul设置宽度

　　　　遍历li元素求出所有的li的宽度和，这样就能动态给ul设置宽度。

　　2、给ul父盒子设置overflow-x:scroll;属性

使用bootstrap响应式布局——手机屏幕中横向滚动显示标签页选项的更多相关文章

  1. Bootstrap响应式布局

    Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...

  2. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  3. Bootstrap响应式布局介绍

    一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...

  4. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  5. bootstrap响应式布局原理

    百分比布局+媒体查询 首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了 Bootstrap的官方解 ...

  6. 百分比布局实现响应式布局在 IE6 中填坑思路

    最近接了个政府项目,政府项目要求响应式,并且兼容IE6,不想用媒体监测的方法,于是用了百分比布局的方法,但是IE6真是名不虚传,做第一个界面就遇到了个bug ①两张宽度各占50%的图片无法在同一横排, ...

  7. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  8. Bootstrap响应式布局(1)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. bootstrap 响应式布局

    先上点媒体查询css(某个著名的”段子“),跟bootstrap无关: <html> <head> <style> body { background-color: ...

随机推荐

  1. Ansible10：Playbook的角色与包含【转】

    当单个playbook文件越来越大的时候,我们就需要重新来组织Playbooks了.我们可以将一个大的playbook拆成若干个小的playbook文件,然后通过include的方式,在主配置文件中将 ...

  2. 【实验室笔记】太阳能板清洁器DEMO

    <太阳能板清洁器DEMO>2015年的毕昇杯比赛作品,用时两天,整体设计思路很简单: [机械结构]: 清洁器主体采用角钢搭建,用钢锯切割好以后,上螺丝,走线用的尼龙扎带捆绑: 清洗滚轮采用 ...

  3. linux 进程监控和自动重启的简单实现（转）

    目的:linux 下服务器程序会因为各种原因dump掉,就会影响用户使用,这里提供一个简单的进程监控和重启功能. 实现原理:由定时任务crontab调用脚本,脚本用ps检查进程是否存在,如果不存在则重 ...

  4. reactor与proactor模式

    在比较这两个模式之前,我们首先的搞明白几个概念,什么是阻塞和非阻塞,什么是同步和异步. 同步和异步是针对应用程序和内核的交互而言的. 同步是指用户进程触发IO操作并等待或者轮询的去查看IO操作是否就绪 ...

  5. org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.reflection.ReflectionException: There is no getter for property named '__frch_lableId_0' in 'class com.cd.entity.Page'

    #号改为$即可

  6. PHP 实现定时任务的几种方法

    一. 简单直接不顾后果型 <?php ignore_user_abort();//关掉浏览器,PHP脚本也可以继续执行. set_time_limit(0);// 通过set_time_limi ...

  7. gradle 构建spring源码时候报错

    这是使用jdk1.7报的错,我卸载1.7后使用1.8 ,就可以了

  8. Java 向Hbase表插入数据报（org.apache.hadoop.hbase.client.HTablePool$PooledHTable cannot be cast to org.apac

    org.apache.hadoop.hbase.client.HTablePool$PooledHTable cannot be cast to org.apac 代码: //1.create HTa ...

  9. 天棋哥哥大战AlphaGo

    天棋哥哥大战AlphaGo Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 20  Solved: 9 [Submit][Status][Web Boa ...

  10. 解决getJSON的缓存问题

    $.getJSON("/portal/edu/getAllEdu?adr="+Math.random(),function(data){