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

　　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. table导出到excel的两种方法

    1. 用table2excel 的js文件,这种方法没有IE兼容性 需要在文件中导入 <script type="text/javascript" src="< ...

  2. Row_Number实现分页

    1:首先是 select ROW_NUMBER() over(order by id asc) as 'rowNumber', * from table1 生成带序号的集合 2:再查询该集合的 第 1 ...

  3. Win7 “Bluetooth设置”对话框无法打开，及无法查找到设备

    方法是在百度上找到的,试用成功. 1.打开开始菜单中的运行选项,然后在对话框中输入services.msc,回车打开服务界面: 2.然后在弹出来的服务窗口中查找到Bluetooth Support S ...

  4. asp.net导出excel科学计数问题

    方法一: 在asp.net 中 我一般都是将要导出的数据放到gridview网格里,首先对网格邦定数据时 字符串形式处理,然后再用普通的形式导出excel就把问题解决了. 我的代码非常简单:在邦定gr ...

  5. C++中的函数指针和函数对象总结

    篇一.函数指针函数指针:是指向函数的指针变量,在C编译时,每一个函数都有一个入口地址,那么这个指向这个函数的函数指针便指向这个地址.函数指针的用途是很大的,主要有两个作用:用作调用函数和做函数的参数. ...

  6. Linux试题及答案

    一. 单选题: 1.添加一条静态路由,使到网络196.199.3通过eth2接口出去,用: A. route add -net 196.199.3.0 B. route add -net 196.19 ...

  7. Android:TextView最小行数设置

    我们有时候为了保证TextView必须有一个最小的高度,那么就需要设置这个行数. 因为如果你不设置的话,在measure这个TextView的时候,此时就无法准确的得到一个最小高度.因为设备不同,所以 ...

  8. 使用devcon禁用启用网卡

    系统平台:win2003 情况描述: 机器上装有两块网卡,8136和8139,网卡A使用静态IP,连接内部办公网,网卡B使用DHCP,连接互联网.切换两个网络时,需要先禁用一个网卡,启用另一个网卡.来 ...

  9. AIX创建用户

    -bash-3.2# mkuser test                    创建用户3004-689 User "test" exists.-bash-3.2# finge ...

  10. AutoTile 自动拼接（四） 学习与实践

    今天主要来说下,数据绑定. 之前第一章,我说到 把 资源图 画成格子,你们应该还有印象吧. 那么,当我 知道 格子数据,能否拿到 资源对应的图片呢? 大家先复习一下 第一章,发现很多格子数据 是相同的 ...