如何使用 16 或 24 列的 bootstrap

2024-03-23

我需要一些帮助将 bootstrap 2.0.4 设置为 16 或 24 列,而不是默认的 12 列 我无法理解我做错了什么我尝试了 bootstrap 站点上的自定义选项,并尝试更改变量中的网格变量.less 文件并使用 Crunch 重新编译 bootstrap.less 但对于这两个试验我仍然有相同的结果。它仍然是 12 列!当我尝试将 div 设置为 span12 时,它仍然占据整个屏幕?

谁能指导我知道我做错了什么,或者如果有人可以生成 16 和 24 列版本并将它们发送给我,那就完美了


此方法适用于较旧版本的 Bootstrap - 版本 2.3.1

单击此链接自定义引导程序:http://twitter.github.com/bootstrap/customize.html http://twitter.github.com/bootstrap/customize.html

您会发现这样的例子。更改参数以满足您的需求。

16 Grid system with Gutter
@gridColumns: 16
@gridColumnWidth: 45px
@gridGutterWidth: 15px
@gridColumnWidth1200: 52.5px
@gridGutterWidth1200: 22.5px
@gridColumnWidth768: 31.5px
@gridGutterWidth768: 15px

16 Grid system without Gutter
@gridColumns: 16
@gridColumnWidth: 60px
@gridGutterWidth: 0px
@gridColumnWidth1200: 75px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 46.5px
@gridGutterWidth768: 0px

24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px

24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 16 或 24 列的 bootstrap 的相关文章

  • 如何在 Bootstrap Modal 中使用 CKEditor?

    如果我使用CKEditor http cksource com ckeditor基于 Bootstrap 模板的 HTML 页面中的插件 效果很好 但是如果我像这样在 Bootstrap Modal 上插入编辑器 div class mod
  • 如何使用 Twitter Bootstrap API 检测您正在使用哪个设备视图?

    我刚刚开始为我即将开展的项目使用 Twitter Bootstrap API 主导航包含 3 个主要元素 site nav 社交链接导航 搜索网站表格 在移动设备上查看网站时 我使用折叠插件折叠网站导航和搜索表单 移动视图有 2 个按钮 单
  • 如何在流体宽度容器中将左侧、中间和右侧的三个按钮放置在同一行?

    我在用着LESS在 Twitter Bootstrap 环境中 但我会直接接受CSS也有答案 Fluid width container Btn1 Btn2 Btn3 另一种宽度 Fluid width container Btn1
  • 如何在输入Bootstrap Datepicker中仅显示年份?

    我使用以下代码仅显示年份 datepicker datepicker viewMode years minViewMode years 但输入以格式显示 dd mm yyyy 由于我没有格式 我该如何解决这个问题 yyyy 尝试这个 dat
  • Twitter Bootstrap 3 的 IE8 问题

    我正在使用新的 Twitter Bootstrap 创建一个网站 该网站看起来不错 并且可以在除 IE8 之外的所有必需浏览器中运行 在 IE8 中 它似乎显示移动版本的元素 但在我的桌面的整个屏幕上延伸 我相信我遇到的问题是 Twitte
  • 多列下拉菜单[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我有一个包
  • 删除编译时的 LESS // 注释

    是否可以配置LESS在通过JS编译时删除 注释 我想从输出的 less 文件中删除它们 Less的单行注释 根据文档所述 应该保持沉默 单行注释在 LESS 中也有效 但它们是 沉默的 它们不会出现在编译后的 CSS 输出中 Hi I m
  • 致命错误:发送表单时未找到“App\Http\Controllers\Input”类

    我正在尝试发送一封包含来自 Laravel 应用程序的表单的电子邮件 当你点击提交时 它会抛出上述错误 致命错误 找不到类 App Http Controllers Input 不知道为什么 因为我没有 也不知道我需要有一个输入控制器 或者
  • Bootstrap 与 Haml 和 Rails 一起崩溃

    我对 Rails 编程等很陌生 所以如果这是非常基本的 我很抱歉 我正在尝试让 twitter bootstrap crash js 在我的网络应用程序上工作 我试图遵循这里的结构http getbootstrap com javascri
  • 编写 LESS 时,chrome 调试器中出现红点?

    我正在将 css 文件转换为 LESS 文件 我的 LESS 只有一部分运行良好 我在 chrome 调试器中看到那些有问题的行有一条奇怪的红点线 知道它们是什么意思吗 http codemirror net doc releases ht
  • 如何在引导程序中将边框半径应用于?

    我需要一行应该是圆角的 并且行与行之间有间距 到目前为止 我尝试了如下所示的表格 曲线类 任何建议 修改都会有帮助 My CSS table curved border collapse separate table curved bord
  • 如何更改 Bootstrap 按钮的形状

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

    虽然我之前在身体下方确定了 50 像素的填充 但我仍然遇到页面页脚下方有一堆空白的问题 我是否只需要延长内容即可填充垂直空间 我第一次使用 bootstrap 来创建我的新网站 但我陷入了这个恼人的困境 这是一个有问题的页面的链接 http
  • 关于在 Bootstrap 中对齐网格项的 CSS 指南

    我正在尝试显示项目网格 并且图片的高度和宽度都不同 并且细节可能长或短 导致页面上的换行符数量不同 This is what I want it to look like And here is what it actually looks
  • 添加取消上传或中止功能以引导多个文件上传插件

    我在用引导多文件上传插件 http blueimp github io jQuery File Upload basic html上传文件 我正在使用此链接上的示例 现在我想在 添加文件 按钮之外添加另一个按钮 取消上传 单击 取消上传 按
  • 使列在引导程序中固定位置

    使用 Bootstrap 我有一个网格列 class col lg 3 我想将其放置在位置 固定 而另一个 col lg 9 是正常位置 可滚动页面 div class row div class col lg 3 Fixed conten
  • Bootstrap 轮播图像不按比例缩放

    我的轮播填充了页面的宽度 但是当我缩小窗口时 y 轴没有响应 一探究竟here http sacgamehub com index html 如何保持原始图像比例 保留轮播中所有图像的明确尺寸 它应该可以正常工作
  • 当用户滚动到页面底部时显示页脚

    这是我的页脚代码 div class row div class col md 12 div the part that always showing at the bottom div div div class col md 12 di
  • ASP.NET MVC 5 基于用户角色自定义 Bootstrap 导航栏

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

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

随机推荐