如何使用 Twitter Bootstrap 2 获得 16 列响应式布局?

2024-01-02

我从各种论坛帖子中收到混合信号。它是否通过更改而本地存在:

// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

to

// Default 940px grid
// -------------------------
@gridColumns:             16;
@gridColumnWidth:         40px;
@gridGutterWidth:         10px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

这就是创建 16 列布局所需要做的全部工作吗?我看到一些论坛帖子说你必须在选择器 span11-16 中进行硬编码才能使其工作,因为自 Bootstrap 2.0 以来这些选择器不再存在并且无法动态创建。


好吧,我刚刚尝试过,它生成了 16 列。您是否看过此页面并尝试自定义您的下载?

http://twitter.github.com/bootstrap/download.html http://twitter.github.com/bootstrap/download.html

另外,如果您查看 mixin(网格)的第 556 行,您将看到生成跨度的函数。生成跨度时会考虑总列数。

https://github.com/twitter/bootstrap/blob/master/less/mixins.less https://github.com/twitter/bootstrap/blob/master/less/mixins.less

换句话说,你可以走了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Twitter Bootstrap 2 获得 16 列响应式布局? 的相关文章

  • 由 Datatables 插件和 jQuery 1.11.3 触发的“未捕获类型错误:无法使用‘in’运算符在”中搜索“长度”

    我正在使用 jQuery Datatables 插件来启用表格的分页 排序和搜索 元素显示但不起作用 并且分页仅有时显示 在 Chrome 控制台中我收到错误 Uncaught TypeError Cannot use in operato
  • CSS 中的重叠文本 - 如何更改它?

    我正在尝试更改 css 文件中的重叠元素 文本 一行文本 在常规浏览器中 在移动设备中显示为两行文本 重叠在一起 此更改适用于网站的移动版本 横向平板电脑的 media 部分 目前 标题 h2 文本在 iPad 平板电脑上重叠 来自 h2
  • 如何在 Bootstrap Modal 中使用 CKEditor?

    如果我使用CKEditor http cksource com ckeditor基于 Bootstrap 模板的 HTML 页面中的插件 效果很好 但是如果我像这样在 Bootstrap Modal 上插入编辑器 div class mod
  • 如何使无线电输入成为必需?

    我在表单中提供了无线电输入 供用户选择性别 如何使性别成为必需的输入 用户必须选择女性或男性 否则他们会按照通常的方式得到提示required 我尝试添加required如下所示 但它不起作用 用户可以继续而不选择女性或男性 div cla
  • Bootstrap 轮播下一个和上一个功能不起作用

    使用最新版本并具有基本的轮播 我已经让它可以使用所有默认设置 但是当尝试添加或停止某些功能时 事情会中断或根本不起作用 我希望能够手动循环浏览图像 不希望它自动循环 我只想使用下一个和上一个按钮来循环 我在这里读过一些帖子 但解决方案不起作
  • 为什么进度条不像文本那样动态变化?

    我在之后动态更新一些元素setTimeout 功能 jQuery 函数 text 似乎在处理时随着数组索引的每次变化而动态更新 但是引导进度条正在通过以下方式更改 css and attr 好像没有动态更新 这是我的页面 您可以看到文本发生
  • 如何在bootstrap中使用垂直对齐

    简单的问题 如何使用 bootstrap 在一个列内垂直对齐一个列 这里的例子 我想垂直对齐child1a和child1b http bootply com 73666 http bootply com 73666 HTML div cla
  • Twitter Bootstrap 2:如何获得响应式设计以将侧边栏放在底部而不是顶部?

    Twitter 的 Bootstrap 2 http twitter github com bootstrap 最后添加了原生响应式设计 但是 默认情况下 当浏览器宽度低于最小宽度时 它将侧边栏放在顶部 我可以看到这对于许多网站来说是如何工
  • Bootstrap 模态对话框,show.bs.modal 事件相关Target 未定义。我怎样才能获得被点击的元素?

    按钮调用模式对话框 单击按钮时 会触发事件 结果事件引用 e latedTarget 未定义 那么 如何从处理程序中获取调用按钮呢 e 似乎不包含任何对调用按钮的引用
  • 修改变量后动态重新导入 Sass 部分

    我正在开发一个利用 Sass 预编译的 Twitter Bootstrap 的项目 每次覆盖变量时 我都必须重新导入 bootstrap sass文件到我的项目主样式表以使覆盖生效 您是否知道如何使此过程自动进行 以便每次修改变量时立即生效
  • Bootstrap 4 网格系统中的“col”上没有填充是否正常?

    我是第一次使用 Bootstrap v 4 我有一个footer就是使用新的flex col并且它在桌面上运行得很好 但是当我切换到移动设备时 它们彼此堆叠得如此紧密 没有垂直边距 填充 这是正常行为吗 另外 我希望内容居中或至少有一些偏移
  • 让 Selenium 与 Bootstrap 模式淡入淡出配合的建议?

    我正在努力以 BDD 的方式生活 我正在使用 Cucumber 带有 Selenium 并且碰巧在我的应用程序中使用 Twitter Bootstrap 模式 在运行 Cucumber 测试时 我得到了 Selenium WebDriver
  • Jquery 手风琴默认不折叠

    我正在使用 bootstrap 提供的折叠插件 这是一个 jquery 简单插件 但是它默认折叠 如何修改以使折叠项默认隐藏 只有当我按下标题时 该项目才会折叠并显示 谢谢 插件的文档 只有几行 所以只需要一分钟 http twitter
  • 如何更改 Bootstrap 按钮的形状

    如何将引导程序中默认的圆角按钮更改为正常的矩形按钮 现在我只能更改按钮的大小颜色或字体 btn lg padding 10px 16px font size 18px line height 1 33 border radius 6px b
  • 引导导航栏后面的空间

    使用引导程序navbar 我试图弄清楚如何使其不隐藏主体部分的顶部 实际上 使用这里推荐的方法可以很好地解决这个问题 Twitter Bootstrap 顶部导航栏阻挡页面顶部内容 https stackoverflow com quest
  • Twitter Bootstrap 等前端技术的后端技术 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 这是一个类似菜鸟的问题 但我们开始吧 我读过 Twitter Bootstrap 以及其他演示框架 它为设计者 程序员提供了轻松构建
  • 角度模态弹出窗口中的范围问题

    我的页面上有一个模式弹出窗口 模式弹出窗口使用引导角度库 在模式的主体内部 我有一个带有 ng model 属性的文本框 按下 确定 按钮后 我想使用该文本框值
  • ASP.NET MVC 5 基于用户角色自定义 Bootstrap 导航栏

    我正在使用 ASP NET MVC 5 内置身份验证方法 我想根据用户所处的角色显示和隐藏链接 在菜单导航栏中 有人达到这个目的了吗 从哪里开始 只需将您的链接包含在 if User IsInRole SomeRole
  • 如何使字形更大? (改变尺寸?)

    我想让地球字形更大 以便它覆盖页面的很大一部分 它是矢量图像 它不是在按钮或任何东西中 而是在按钮中 它只是孤独的 有没有办法做到这一点 div class jumbotron span class glyphicon glyphicon
  • 如何在 data-disable-with 上设置 html 到 Rails Submit_tag

    我有一个使用 bootstrap 的 RoR 应用程序 我正在尝试将 fontawesome html 图标标签应用于 Submit tag 帮助程序 但它似乎不受支持 当我单击 提交 时 禁用内容仅显示为字符串 而不是解释为 html 尽

随机推荐

  • Android 测试给出 IllegalStateException: 未注册仪器

    我按照谷歌教程编写了我的第一个 Android 测试 当然我得到了错误 java lang IllegalStateException No instrumentation registered Must run under a regis
  • 向 python 生成器添加元素

    是否可以将元素附加到 python 生成器 我目前正在尝试从一组杂乱的文件夹中获取所有图像并将它们写入一个新目录 为了获取文件 我使用 os walk 它返回单个目录中的图像文件列表 虽然我可以用这个列表创建一个生成器 但我不知道如何将所有
  • 哪种 NoSQL 数据库最适合仅附加审计日志记录用例?

    我的用例是资源的审核日志记录 为了进行讨论 考虑一个非常简单的模式 资源名称 访问时间戳和访问用户名 有了所有 NoSQL 选项 我想知道哪种解决方案最适合我的用例 资源名称保存在图形数据库 Neo4j 中 虽然我们可以将顶点和边添加到连接
  • 如何获取所有正在运行的活动android?

    我想知道有没有办法获得所有跑步活动的列表 据我了解 一次只会运行一个活动 该活动将是屏幕上的活动活动 其他活动将处于暂停或停止状态 如果有
  • Rails Mailer:将电子邮件发送到本地文件

    有什么方法可以将 Rails 3 中的电子邮件发送到本地文件等 而不是使用 SMTP 服务器吗 我想在不使用任何类型的 SMTP 的情况下测试电子邮件的内容 最好仅在 DEV 环境中测试 最好的是本地 SMTP 或允许我检查电子邮件 检查电
  • 如何使用 Passport.js 访问 OAuth 的状态参数?

    我正在使用 Passport js 进行身份验证 并且每个Google 的 OAuth2 文档 https developers google com accounts docs OAuth2Login formingtheurl 我传递一
  • Python:使用 pyOpenSSL.crypto 读取 pkcs12 证书

    我有西班牙权威机构 FNMT 颁发的有效证书 我想用它来了解更多信息 该文件的扩展名是 p12 我想阅读其中的信息 名字和姓氏 并检查证书是否有效 可以用 pyOpenSSL 做到这一点吗 我想我必须使用 OpenSSL 中的加密模块 有任
  • 如何在 StringBuilder 上检查 null?

    我想在我的代码中专门检查 null 或空 空和空是否相同StringBuilder在Java中 例如 StringBuilder state new StringBuilder StringBuilder err new StringBui
  • 如何使用反射获得泛型类型的正确文本定义?

    我正在研究代码生成 并遇到了泛型的障碍 这是导致我出现问题的 简化 版本 Dictionary
  • 在网络浏览器中打开 R Shiny 应用程序时,传单多边形会失去颜色

    我正在使用 R 中的传单构建地图 将其部署为 Shiny 应用程序 Shiny 应用程序在 RStudio 中运行良好 但是当我在网络浏览器中打开它时 多边形失去了颜色 其他一切都很好 底图在那里 多边形都在那里 您可以将鼠标悬停在多边形上
  • Ipython笔记本缓存问题

    在 ipython 笔记本中 我调用从我自己的模块导入的函数并运行一些代码 我注意到 如果我更改函数中的代码 在笔记本之外 并执行笔记本 则旧版本的函数将运行 当我记得时 ipython笔记本或firefox似乎正在缓存我可以用ctrl F
  • Python Byte 不打印二进制

    当我在 Python 中打印这样的程序时 x b francis 输出是b francis 如果字节在0 s and 1为什么它不打印出来 你似乎从根本上感到困惑 以一种非常常见的方式 数据本身是一个不同的概念表示 即当您尝试时所看到的pr
  • 页面滚动结束时的 jQuery 回调

    我有一个 div 标签 在 css 中设置为 overflow scroll 我有一个回调 应该在使用它找到的元素的滚动末尾调用 details scroll function if this height this get 0 scrol
  • 未找到 Android 方面,使用 Android Studio 0.2 进行编译时出现问题

    因此 遵循这篇 SO 帖子的建议 抱歉 我会在那里发表评论 希望我没有足够的声誉 Gradle 失败 无法确定要执行哪些任务 https stackoverflow com questions 17614477 gradle failure
  • vc++编译错误RC:致命错误RC1107:无效用法;使用RC /?为了

    我在构建 vc 项目时遇到以下错误 使用 Visual Studio 2010 RC 致命错误 RC1107 无效使用 使用RC 为了 我知道构建资源时存在一些问题 但如何获得确切的问题区域 Thanks 解决方案 在最后一个包含路径中添加
  • 简单的旋转悬停效果不起作用

    我正在尝试创建一个简单的效果 以便当我将鼠标悬停在最内圈时 两个外环旋转以创建很酷的效果 我认为这将是一项简单的任务 但我似乎无法弄清楚我做错了什么 当我将鼠标悬停在内圈上时 所有变化都是两个内圈向屏幕右下角移动 根本不旋转 我在这里缺少什
  • yii2 作曲家更新错误:版本字符串“2.*”无效

    我正在使用作曲家更新Yii2项目 但它正在退出但有异常 我已经将composer更新到最新版本 c6cc6dd6070871f4b198ed39f76dd8047c116b02 但它仍然不起作用 Importing tag v2 0 2 2
  • 何时在 C++ 中使用指针

    我刚刚开始学习C 中的指针 我不太确定何时使用指针 何时使用实际对象 例如 在我的一项作业中 我们必须构造一个 gPolyline 类 其中每个点都由一个 gVector 定义 现在 我的 gPolyline 类变量如下所示 private
  • 如何在索引列的查询中使用限制而不扫描所有行?

    这是我的桌子 在我的桌子上 Clustering key 主键和自增量 ID 索引栏 Data 文本数据类型列 Position 索引栏 维持顺序Data 我的表有 90 000 行 内容相同ID等于 5 我想要前 3 行ID等于 5 我的
  • 如何使用 Twitter Bootstrap 2 获得 16 列响应式布局?

    我从各种论坛帖子中收到混合信号 它是否通过更改而本地存在 Default 940px grid gridColumns 12 gridColumnWidth 60px gridGutterWidth 20px gridRowWidth gr