html - 7 Bootstrap 中的列网格在 xs 处崩溃

标签 html css twitter-bootstrap grid multiple-columns

我真的很喜欢这段代码pen我想用它来创建一个日历,但是我需要使用 Bootstrap 在 screen-xs 折叠它,但我不确定该怎么做。

我尝试添加 .seven-cols .col-xs-1.seven-cols .col-xs-12 但它仍然只是分为两点.

我也无法理解 CSS。

最佳答案

如果您想使用 bootstrap 来呈现日历,我建议您通过更改列数来编译自定义版本。 12 列的默认值不实用,所以在这里将其更改为 14(输入“@grid-columns”):http://getbootstrap.com/customize/#grid-system

如果要保留原始 Bootstrap ,每天使用 1 列,第一天使用一个偏移量:http://jsfiddle.net/wj635bsr/

<div class="row">
    <div class="day col-md-1 col-md-offset-2">
        <div class="day-title">Monday</div>
    </div>

    ...

</div>

在这个例子中,我使用 col-md-* 因为 col-xs-* 是一种不同的行为:( http://getbootstrap.com/css/#grid-options )

关于html - 7 Bootstrap 中的列网格在 xs 处崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29689413/

相关文章:

html - 检查 NSString 是否是 html 字符串?

html - KineticJS setText 方法像定时器一样更新

javascript - 让 vibrate() 在没有 PhoneGap 的浏览器中工作

javascript - 如何检查是否加载了 Twitter Bootstrap ?

javascript - 如何在固定其他框架的同时仅在一个iframe中显示滚动条?

jquery - 多个 Jquery 脚本

javascript - Internet Explorer 打印问题

html - 渐变图像上的两个文本。每个元素都有不同的链接

ajax - 导航时替换 Bootstrap 输入提示

jquery - 如果与 Prototype JS 一起使用,Popover 会隐藏父元素