css - Drupal 7 中的 Twitter Bootstrap 列未在 Safari 中排列

标签 css twitter-bootstrap drupal-7 drupal-views drupal-theming

我安装了 Bootstrap 模块。我已经为我的 View 布局制作了自定义 tpl 文件,以去除任何不必要的 div,因此结构如下:

<body>
    <div class="mySection">
        <div class="container">
            <h2>Title</h2>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                    <a href="linkToContent">
                        <div>
                            <img src="contentImg" class="img-responsive"/>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>   

我快崩溃了,因为在 Safari 中为 992px - 1199px,在 Chrome 中为 1200px + 我的第二行列已经出来了。第 4 列向右浮动,第 5 列和第 6 列在第 4 列下方向左浮动,如下所示:

[ 1 ] [ 2 ] [ 3 ] 
            [ 4 ] 
[ 5 ] [ 6 ]

991px 及以下两种浏览器都可以。

我曾假设 div 中有一些东西会丢弃填充或列宽,或者类似的东西,因为我在直 Bootstrap 和 HTML 元素中遇到问题,其中列的内容尽管在视觉上很合适,以类似的方式将列推出。所以,我已经将其剥离并删除了我自己的 CSS 和大部分内容,但实际上现在比以前更糟(在 Chrome 中还不错)。

我在去除行中的排水沟方面取得了一些成功,但这在其他方面造成了问题。

现在想知道使用 Drupal 的 Bootstrap 是否比它的值(value)更麻烦,我应该改用像响应式网格系统这样的简单网格系统。非常欢迎任何建议或帮助!

最佳答案

当您的一个(或某些)列的垂直尺寸略有不同时,通常会发生这种情况。要解决此问题,您应该使用 bootstrap 提供的行,并将每 3 列包含在不同的行中。

关于css - Drupal 7 中的 Twitter Bootstrap 列未在 Safari 中排列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30242625/

相关文章:

html - Bootstrap 不均匀列顺序

javascript - Bootstrap 上不可点击的侧边栏链接

mysql - Drupal7 中的独特内容标题(主键与模块)

php - 匿名用户的 Drupal 权限

html - 列表样式 : none alters layout

html - 对作为多个类成员的元素的更好的 HTML 注释实践

jquery - 试图让我的导航栏在移动设备上下拉

javascript - 我可以在 Drupal 7 的 jquery 脚本中添加 php if 语句吗?

css - Bootstrap 4 在 col div 中对齐元素

html - 停止在标签末尾 float