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

　　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. CentOS ulimit

    Linux 文件系统设置 文件句柄数 ulimit -n 查看 echo "* - nofile 65536" >> /etc/security/limits.conf ...

  2. 好用的API文档--在线版

    安卓在线api http://www.android-doc.com/reference/packages.html

  3. windows下使用git管理github项目

    1. 下载安装msysgithttp://code.google.com/p/msysgit/downloads/list2. 注册github账号3. 生成ssh公钥和私钥ssh-keygen -C ...

  4. queue(),dequeue()

    这两个方法,一个是往里面添加队列,一个是执行队列 也是分静态方法和实例方法, 同样,实例方法最后调用静态方法 源码主要分析一下延迟delay方法,如何起作用的,写的有点仓促,先记录一下 在这里参照了网 ...

  5. docker容器和镜像区别

    这篇文章希望能够帮助读者深入理解Docker的命令,还有容器(container)和镜像(image)之间的区别,并深入探讨容器和运行中的容器之间的区别. 当我对Docker技术还是一知半解的时候,我 ...

  6. 移植WL18XX到高通的时候，会出现几个.KO文件没有编译出来的情况

    1.检查kernel的.config文件,看是否有CONFIG又恢复了.这个时候就要需找依赖.把依赖使能 2.然后再去驱动源码检查 KCONFIG 的依赖,使能改使能的配置就可以了.

  7. 准备着手学习python

    1. python 的框架 Tornado 网址: http://www.tornadoweb.org/en/stable/ github: https://github.com/tornadoweb ...

  8. switch case多值匹配

    switch case多值匹配一般有两种情况 1.列举(将所有值列举出来) var n= 3;switch (n){    case 1:     case 2:    case 3:         ...

  9. 【java】基础中的杂乱总结（一）

    1 构造代码块 作用:给对象进行初始化.对象一建立就运行,并且优先于构造函数执行 构造函数是给所有对象进行统一初始化,构造函数是给对应的对象初始化 package package1; class Pe ...

  10. PID控制学习笔记（一）

    比例控制往往会存在稳态误差(该结论适用于0型对象) 由比例度的定义和意义,比例增益Kc越大,即直线的斜率越大,则,越快达到平衡,稳态误差越小,因此在保证系统相对稳定性一定的条件下,总是希望比例增益越大 ...