我不明白 twitter bootstrap span 和 row

2024-01-05

我是 960 网格系统的大用户,我想我会尝试一下推特引导程序 http://twitter.github.com/bootstrap/,但也许这是一个愚蠢的问题,你可以嘲笑我并对我投反对票,但事实是我不明白跨度和行。

所以我的问题是,当我创建一个容器并在其中创建跨度时,它不能正确地彼此相邻:

Like in 960gs https://960.gs/如果我写以下内容

<div class="container_12">
  <div class="grid_4"></div>
  <div class="grid_4"></div>
  <div class="grid_4"></div>
</div>

我得到了一个完美的 3 列彼此相邻。

但我无法使用 Twitter Bootstrap 实现这一点,无论我做什么,我总是会得到不成比例的列,因此这些列不会像 960gs 那样填充容器。如果我放置 3 列,则右侧边距不正确,或者无法正确放入容器中。

引导示例:

<div class="container">
    <div class="row">
        <div class="span4">
            <h2>Column one</h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
        </div>  
        <div class="span4">
            <h2>Column one</h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
        </div>  
        <div class="span4">
            <h2>Column one</h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
        </div>  
    </div>  
</div>

因此,在上面的示例中,我最终得到了不成比例的列,左侧第一列没有边距。如果我在 960gs 中使用网格类执行此操作,那就完美了。

与导致我的问题的 960gs 相比,Twitter Bootstrap 有什么不同?


原因:

  • 容器为 940px
  • 行长为 960 像素,边距为 -20 像素
  • span4 300px,边距 20px

当屏幕宽度

“twitter bootstrap”解决方案:

添加 bootstrap-responsive.css,当屏幕低于 980px 并超过 768px 时:

容器变为 724px,行 744px,span4 228px,在第一个 span4 上保留左边距。

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

我不明白 twitter bootstrap span 和 row 的相关文章

随机推荐

  • ORA-01830: 日期格式图片在转换整个输入字符串之前结束

    SQL 在大多数安装上都可以正常工作 但是 我在加拿大安装 Oracle 时遇到问题 可能是日期本地化问题 http www google com search q ORA 01830 http www google com search
  • 如何在 C 中将 double 转换为 int?

    double a a 3669 0 int b b a 我在 b 中得到 3668 而不是 3669 我该如何解决这个问题 如果有 3559 8 这样的我也想要 3559 而不是 3560 我怀疑你不知道actually有这个问题 我怀疑你
  • 同义词分析器不工作

    这是我的设置 countries aliases mappings country properties countryName type string settings index creation date 1472140045116
  • (Perl) 从文件读取字符串时是否可以插入变量?

    我正在编写一个脚本 其中有一些变量传递给字符串 然后将它们打印出来 初始字符串只有 6 行 我不需要外部文件 但现在我有了一个可以填充 1000 多行的新字符串 新字符串还有一些字段将被脚本中声明的变量替换 文本文件内容如下 Hello n
  • 如何在 Android 中以编程方式锁定屏幕? [复制]

    这个问题在这里已经有答案了 可能的重复 以编程方式锁定 Android 设备 https stackoverflow com questions 4545079 lock the android device programatically
  • 在 Docker 中向 Golang 应用程序发送信号

    我正在尝试在 docker 容器内运行用 golang 编写的服务器 例如 package main import net http func main http HandleFunc func w http ResponseWriter
  • Javascript 从 UIWebView 调用 Swift

    我正在尝试从 UIWebView 中的 javascript 函数调用 iOS 10 中的 Swift 我设置了一个非常基本的项目只是为了尝试使其正常工作 代码如下 import UIKit class ViewController UIV
  • django 变量可用于所有视图

    使用 context processors 可以轻松定义一个可调用的结果变量可供所有模板使用 是否有任何类似的技术可以使变量可用于所有视图 这有可能吗 也许有一些解决方法 姜戈 2 2 蟒蛇 3 5 3 您可能想要实现自定义中间件 http
  • 如何终止 Neo4j 中当前长时间运行的查询

    如何终止 Neo4j 中当前长时间运行的查询 无需重新启动服务器 我知道我们可以在全球范围内设置查询超时 https groups google com forum topic neo4j 5ec8FThLTeo 但有时我想在服务器上执行繁
  • vbs安静而优雅的taskkill所有chrome进程

    这段代码有什么办法吗 Dim oShell Set oShell WScript CreateObject WScript Shell oShell Run taskkill im chrome exe 0 True 我希望它关闭所有正在运
  • 如何在ajax中调用Struts2 Action方法?

    如何在ajax中调用Struts2 Action方法 现在我仍然在调用servlet 有没有可能 如果有请分享 更新struts xml as
  • Gtk ComboBox 宽度基于内容

    我正在动态地将选项填充到具有条目的 GTK3 ComboBox 有些选项可能会很长 如果我的模型中有宽的项目 我希望能够使组合框更宽 有没有办法做到这一点 如果组合框可以自动扩展但可以设置上限 那就太好了 None
  • 鼠标滚轮事件与悬停控件一起使用

    在我的 C 3 5 Windows 窗体应用程序中 我有一些 SplitContainer 每个内部都有一个列表控件 停靠填充 当焦点位于这些控件之一并且我移动鼠标滚轮时 现在获得焦点的列表会滚动 我的任务是滚动当前由鼠标悬停的列表 而不是
  • neo4j 和 max 打开文件

    我在 ubuntu 上使用 neo4j 1 8M06 当我启动它时 我收到此警告 WARNING Max 1024 open files allowed minimum of 40 000 recommended 这是什么意思 如果需要的话
  • WordPress 函数获取帖子的顶级类别?

    您好 我正在尝试找到帖子的最高类别 我尝试查找任何 WP 内置函数 但失败了 例如我有这样的类别 Parent sub 1 sub 2 我在 sub 2 中有一个帖子 因此 使用 sub 2 的 ID 我试图找到本例中名为 Parent 的
  • PHP 中是否有 Java HashMap 等效项?

    我需要类似于Java中的HashMap的PHP对象 但我在谷歌搜索时没有找到 所以如果有人知道我如何在PHP中模仿HashMap 我们将不胜感激 PHP 中的数组可以具有键值结构
  • Ubuntu 上的 Java 进程一直被某些东西杀死,有人知道为什么吗?

    所以每隔几天我在 Ubuntu 上的 java 进程就会自动终止 我不明白为什么 我的盒子有 35 84 GB 的 RAM 当我启动 Java 进程时 我向它传递了 Xmx28g 参数 因此它使用的内存应该小于可用的最大 RAM 我运行 j
  • 如何检查DataFrame单元格中是否存在字符

    创建三行 DataFrame 后 import pandas as pd df pd DataFrame a 1 2 3 4 5 6 我检查是否有任何单元格等于 3 4 df a 3 4 Since df a 3 4 命令结果到pandas
  • UITableViewCell、UITextView 具有动态高度

    我需要做一个UITableViewCell其中包含大量文本 我知道我可以添加一个UITextView到我的单元格 但每个条目的文本量不同 我知道我可以控制高度UITableViewCell with CGFloat tableView UI
  • 我不明白 twitter bootstrap span 和 row

    我是 960 网格系统的大用户 我想我会尝试一下推特引导程序 http twitter github com bootstrap 但也许这是一个愚蠢的问题 你可以嘲笑我并对我投反对票 但事实是我不明白跨度和行 所以我的问题是 当我创建一个容