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

　　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. ECShop - 数据库操作类

    ECShop v2.7.2没有使用一些开源的数据库操作类,比如adodb或者PEAR,而是封装了自己的实现.这样做的好处是实现非常轻量,只有一个文件,27Kb,大大减小了分发包的文件大小.另外,当网站 ...

  2. 笨方法学python--多行，转义序列

    1 输入多行字符串的方法有2个,一个是使用换行符 \n.另一个是使用 "三引号". 2 针对不同的符号,有很多这样的"转义序列"(escape sequence ...

  3. vs2013安装visual assist和viemu之后提示功能等无效解决

    1.vs2013安装了上面两个软件之后会发生va功能无效,经过一番谷歌百度后找到了解决方案 1.打开注册表 2.直接搜索TrackCaretVisibility这个键值,找到后把他的值修改成00 此篇 ...

  4. Got Stucked in C++ Static Library Loading.. for some time

    I used to load library using 1 single .dll file, so when I happen to do method calling between 2 pro ...

  5. javascript语句语义大全（1）

    1. <script></script> javascript标签对,所有javascript内容都会写在这个里面 2. var a=0; var a; 变量的声明,上面的是声 ...

  6. 如何在Eclipse中添加Servlet-api.jar的方法

    方法一: 点击窗口->首选项->java->构建路径->类路径变量->新建:将你的tomcat目录下的common/lib/servlet.jar加进来.如果你建立了一个 ...

  7. UVALive 2035 The Monocycle（BFS状态处理+优先队列）

    这道题目真是非常坎坷啊,WA了很多次,但所有的思路都是奔着广搜去想的,一开始出现了比答案大的数据,才想到了应该是优先队列,再说加上也肯定不会错.一开始我读错了题意,以为旋转并且前行需要的时间跟其他一样 ...

  8. LightOJ 1234 Harmonic Number 调和级数部分和

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1234 Sample Input Sample Output Case : Case : ...

  9. java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter

    在使用实验室的提供的AbstractDAO的时候报错:Exception in thread "main" java.lang.NoSuchMethodError: org.obj ...

  10. linux自动化构建工具-scons指南

    1.scons是linux下的自动构建工具 scons是用Python编写的,使用scons之前需确认是否已经安装了Python.(在系统的命令行中运行python -V或python --versi ...